如何更好地定义JQuery DataTables列呈现？

Question

我们广泛使用JQuery DataTables.我现在将所有app表切换到AJAX数据源,以更好地支持搜索并更快地呈现表.

我遇到的问题是如何在我的表列中定义数据呈现.我不在列中仅渲染数据,但我需要在某些列中添加一些额外的标记(如<span class="label">data</span>链接等).

这可以通过javascript完成,这是我如何做到的.问题是我不希望我的应用程序中的每个表都有此列定义语法.不是两个表是相同的,并且为了支持这样的所有表/列,它将导致每个表的一堆javascript代码.我认为这不是一个好习惯.

$('.data-table').each(function(){
    initialize_ajax_data_tables($(this));
});

function initialize_ajax_data_tables(element)
{
    var display_rows = element.attr('data-rows') ? parseInt(element.data('rows')) : 25;
    var initial_sort = element.attr('data-sort') ? element.data('sort') : [0, 'asc'];

    dataTables = element.DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            url: base_url+'ajaxprocess/products_data_table.json',
            type: 'GET'
        },
        "columns": [
           { "data": "id" },
           { "data": "product_type_name" },
           { "data": "code" },
           { "data": "name" },
       ],
       "columnDefs": [
           {
               "render": function ( data, type, row ) { 
                   return '<span class=\"label label-info\">'+ data +'</span>'; 
               },
               "targets": 1
           },
           {
               "render": function ( data, type, row ) { 
                   return '<span class=\"label label-success\">'+ data +'</span>';
               },
               "targets": 2
           },
       ],
        "pageLength": display_rows,
        "order": initial_sort,
    });
    dataTables = $.fn.dataTable.fnTables(true);
}

有没有办法以某种方式在HTML本身中定义此列定义/呈现,然后在初始化DataTables时在javascript中将其拉出来？或者关于如何处理这个问题的任何其他方式？

对于DataTables上的排序规则和pageLength,我使用data-attributes了<table>元素,这非常有效.这样我定义了如下属性:

<table id="DataTables_Table_0" class="data-table" data-rows="50" data-sort="[0,&quot;desc&quot;]">

这工作正常,但不能将此用于columnDefs数组,因为render属性需要函数.

Answer 1

按照你的想法，我会说尝试在某处定义渲染方法并通过数据属性绑定它们。

这个解决方案相当容易测试，但我认为您无法解决 columnDefs 问题。