如何绘制数据表列值

时间:2017-07-12 11:37:30

标签: jquery datatables

datatable ajax加载中,我想基于另一列绘制一列的值,以下是代码:

 var oTable = $('#tblOrderList').on('preXhr.dt', function (e, settings, data) {
                $(this).dataTable().api().clear();
                settings.iDraw = 0;
                $(this).dataTable().api().draw();
                data.CustomerNo = phoneNo;
            }).DataTable({
                "ajax": {
                    "url": '/PBF/GetOrderList',
                    "type": "post",
                    "datatype": "json",
                },
                "columns": [
                    { "data": "Name", "autoWidth": true },
                    { "data": "Phone", "autoWidth": true },
                    { "data": "OrderNo", "autoWidth": true },
                    { "data": "Date", "autoWidth": true },
                    { "data": "Status", "autoWidth": true },
                    {
                        "data": "OrderNo", "width": "2px", "render": function (data) {
                            return '<a href="javascript:void(0);" data-toggle="modal" data-target="#updateInvoiceModal" class="updateInvoice" data-id=' + data + '><i style="font-size:medium;padding:20px" class="icon-pencil-square-o"></i></a>';
                        }
                    }
                ],
                "paging": false,
                "ordering": false,
                "autoWidth": false,
                "info": false,
                "bFilter": false,
                "bLengthChange": false,
                "bDestroy": true
            });

我想根据第五列数据编写第六列值,第五列获取值已交付或未交付

{
      "data": "OrderNo", "width": "2px", "render": function (data) {
      if(Status==delivered)
      {
         return '-';
      }
      else
      {
         return 'something';
      }
}

2 个答案:

答案 0 :(得分:0)

您可以使用render来完成此操作,但您已省略参数。 full参数表示整行数据,因此您可以使用索引访问任何列,例如full[4]。请注意,这是从零开始的,因此第5列是第4个索引。

"columns": [
                    { "data": "Name", "autoWidth": true },
                    { "data": "Phone", "autoWidth": true },
                    { "data": "OrderNo", "autoWidth": true },
                    { "data": "Date", "autoWidth": true },
                    { "data": "Status", "autoWidth": true },
                    {
                        "render": function (data, type, full, meta) {
                             if(full[4] == 'delivered'){
                                return '-';
                             }else{
                                return 'something';
                             }
                         }
                    }
                ],

答案 1 :(得分:0)

尝试类似的事情:

 var oTable = $('#tblOrderList').on('preXhr.dt', function (e, settings, data) {
                $(this).dataTable().api().clear();
                settings.iDraw = 0;
                $(this).dataTable().api().draw();
                data.CustomerNo = phoneNo;
            }).DataTable({
                "ajax": {
                    "url": '/PBF/GetOrderList',
                    "type": "post",
                    "datatype": "json",
                },
                "columns": [
                    { "data": "Name", "autoWidth": true },
                    { "data": "Phone", "autoWidth": true },
                    { "data": "OrderNo", "autoWidth": true },
                    { "data": "Date", "autoWidth": true },
                    { "data": "Status", "autoWidth": true },
                    {
                        "data": null, "width": "2px", "render": function (data) {
                            if(data.Status == "delivered"){
                                return '-';
                            }else{
                                return data.OrderNo;
                            }
                        }
                    }
                ],
                "paging": false,
                "ordering": false,
                "autoWidth": false,
                "info": false,
                "bFilter": false,
                "bLengthChange": false,
                "bDestroy": true
            });