使用json数据和派生列初始化jquery数据表

时间:2016-12-27 06:21:14

标签: jquery json datatable datatables

我们在数据表中有一个选项,我们可以从另一列的值派生一个列:

我目前的代码:

customerDataTable = $('#datatable_tabletools').dataTable({
            "bDeferRender": true,
            "aaData" : customerData,
            "aoColumns" : [{"mDataProp":"id"},{"mDataProp":"card_id"},{"mDataProp":"points"},{"mDataProp":"name"},{"mDataProp":"ref"},{"mDataProp":"refs"},{"mDataProp":"address"},{"mDataProp":"mob"},{"mDataProp":"ref_mob"},{"mDataProp":"profile"},{"mDataProp":"vitems"},{"mDataProp":"edit"},{"mDataProp":"del"},{"mDataProp":"bills"},{"mDataProp":"account"}],
            /*"columnDefs" : [{orderable:false,targets : [0,1,2,3,4,5,6]},{searchable:false,targets:[2,3,4,5,6,7]}],*/
            "sDom" : "<'dt-top-row'Tlf>r<'dt-wrapper't><'dt-row dt-bottom-row'<'row'<'col-sm-6'i><'col-sm-6 text-right'p>>",
            "oTableTools" : {
                "aButtons" : ["copy", "print", {
                    "sExtends" : "collection",
                    "sButtonText" : 'Save <span class="caret" />',
                    "aButtons" : ["csv", "xls", "pdf"]
                }],
                "sSwfPath" : "<?=$baseUrl?>static/js/plugin/datatables/media/swf/copy_csv_xls_pdf.swf"
            },
            "iDisplayLength": 100,
            "fnInitComplete" : function(oSettings, json) {
                $(this).closest('#dt_table_tools_wrapper').find('.DTTT.btn-group').addClass('table_tools_group').children('a.btn').each(function() {
                    $(this).addClass('btn-sm btn-default');
                });
            }
        });

如果我在json中有一个数据列“id”,我可以用它来以下面的方式定义列:

"aoColumns" : [{"mDataProp":"id"},{"mDataProp":"<button onclick='editRecord({id})'>Edit</button>"}],

目前我已经操纵JSON来添加从id派生的新字段编辑,这可以通过dataTable定义来完成

1 个答案:

答案 0 :(得分:0)

尝试使用这种方式:

 "aoColumns" : [
      {"mDataProp":"id"},
      {"mDataProp":"<button onclick='editRecord({id})'>Edit</button>",
       "fnRender": function (oObj) {
           if (oObj.aData[0] == "1") // its containg your Id
           { return '<button onclick="editRecord({'+oObj.aData[0]+'})">Edit</button>';}
       }
    ],