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

我们广泛使用JQuery数据表。我现在将所有应用程序表切换到AJAX数据源，以更好地支持搜索并更快地呈现表

我遇到的问题是如何在表列中定义数据呈现。我不仅在列中呈现数据，还需要在某些列中添加一些附加标记（如

数据
或链接等）

这可以通过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);
}

这可以很好地工作，但不能将其用于columnDefs数组，因为渲染属性需要函数。
按照您的想法，我会说尝试在某个地方定义渲染方法，并通过数据属性绑定它们

这个解决方案很容易测试，但我认为您无法解决columnDefs的问题。
我正在取得一些进展，并将我的发现发布在下面。也许有些人会觉得这很有用，但如果你有更好的设计，我仍然愿意接受其他解决方案

目前，我已将代码分为两个部分：

主应用程序JS文件：所有应用程序表的通用DataTables初始化代码
视图：由后端生成并提供给浏览器的HTML表视图。在这个视图中，我定义了特定于表的属性，然后在公共DataTable初始化代码中引用这些属性
为表数据提供服务的后端AJAX脚本
所以用实际代码来演示这一点

1。主初始化代码

$('.data-table').each(function(){
    initialize_data_tables($(this));
});
function initialize_data_tables(element)
{
    if(!(element instanceof jQuery)) element = $(element);
    var table_defs = element.attr('data-table-def') ? eval(element.data('table-def')) : [];
    dataTables = element.DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            url: table_defs.url,
            type: 'POST'
        },
        "columns": table_defs.columns,
        "pageLength": table_defs.rows,
        "order": table_defs.sort,
    });
    dataTables = $.fn.dataTable.fnTables(true);
}

2。HTML视图
这里我为表定义、列定义等定义特定的JS对象。应用程序中的每个表都有特定的定义。这种结构还允许我在视图中同时拥有多个数据表，并使用表属性定义引用正确的JS对象

<script type="text/javascript">
        var tableDef = {
            url: "<?= Uri::create('utilities/ajaxprocess/products_data_table.json') ?>",
            columns: [
                    { "data": "id" },
                    { "data": "product_type_name", render: function ( data, type, row ) { 
                           return '<span class=\"label label-info\">'+ data +'</span>'; 
                       } 
                    },
                    { "data": "code" },
                    { "data": "name" },
                ],
            rows: 50,
            sort: [ 0, 'desc' ]
        };
</script>

<table class="data-table" data-table-def="tableDef”>...</table>


变量tableDef={
url:“”，
栏目：[
{“数据”：“id”}，
{“数据”：“产品类型\名称”，呈现：函数（数据、类型、行）{
返回“”+数据+“”；
} 
},
{“数据”：“代码”}，
{“数据”：“名称”}，
],
行：50，
排序：[0，'desc']
};
您的意思是像在表视图中的标记中定义那个数组，还是像这样？
<script type="text/javascript">
        var tableDef = {
            url: "<?= Uri::create('utilities/ajaxprocess/products_data_table.json') ?>",
            columns: [
                    { "data": "id" },
                    { "data": "product_type_name", render: function ( data, type, row ) { 
                           return '<span class=\"label label-info\">'+ data +'</span>'; 
                       } 
                    },
                    { "data": "code" },
                    { "data": "name" },
                ],
            rows: 50,
            sort: [ 0, 'desc' ]
        };
</script>

<table class="data-table" data-table-def="tableDef”>...</table>