jQuery Datatables对齐中心1列 [英] jQuery Datatables align center 1 column

问题描述

  $（＃TransactionTable）。DataTable（ {
 ajax：{
 url：'/ Transaction / SearchMockup'，
 type：'POST'，
 data：{
 cardEndingWith：$（＃ccn ）.val（），
 status：$（＃status）。val（），
 supplier：$（＃supplier）。val（），
 fromDate：$（ #fromDate）。val（），
 toDate：$（＃toDate）.val（）
} 
}，
列：[
 { 
 data：'Status'，render：function（data，type，row）{
 switch（data）{
 case 1：
 return'< div id =circleRed >< / div>'
 break; 
案例2：
返回'< div id =circleGreen>< / div>'
 break; 
 case 3：
 return'< div id =circleOrange>< / div>'
 break; 
 
 
 $ b {data：'TransactionId'}，
 {data：'CreditCardNumber'}，
 {data：'Supplier' }，
 {data：'CreatedAt'}，
 {data：'金额'} 
] 
}）; 
  

我需要添加列选项才能实现它？我尝试阅读所有的Datatables doc和google。

解决方案

你可以使用你的主题类（bootstrap） columndef。
like

text-right，text-left，text-center

 'columnDefs'：[
 {
targets：0，//您的案例第一列
 className：text-center，
width：4％
}，
 {
targets：2，
className ：text-right，
}]，
  

Want to align center just the first column called "Status":

        $("#TransactionTable").DataTable({
            ajax: {
                url: '/Transaction/SearchMockup',
                type: 'POST',
                data: {
                    cardEndingWith: $("#ccn").val(),
                    status: $("#status").val(),
                    supplier: $("#supplier").val(),
                    fromDate: $("#fromDate").val(),
                    toDate: $("#toDate").val()
                }
            },
            columns: [
            {
                data: 'Status', render: function (data, type, row) {
                    switch (data) {
                        case 1:
                            return '<div id="circleRed"></div>'
                            break;
                        case 2:
                            return '<div id="circleGreen"></div>'
                            break;
                        case 3:
                            return '<div id="circleOrange"></div>'
                            break;
                    }
                }
            },
            { data: 'TransactionId' },
            { data: 'CreditCardNumber' },
            { data: 'Supplier' },
            { data: 'CreatedAt' },
            { data: 'Amount' }
            ]
        });

What i need to add the columns option to make it happen? I try to read all the Datatables doc and google.

解决方案

You can use your theme classes (bootstrap), or your own in columndef. like

text-right, text-left,text-center

 'columnDefs': [
  {
      "targets": 0, // your case first column
      "className": "text-center",
      "width": "4%"
 },
 {
      "targets": 2,
      "className": "text-right",
 }],

这篇关于jQuery Datatables对齐中心1列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！