Question

我正在使用Jquery的Datatables 1.10插件和Row Grouping高级初始化：https://datatables.net/examples/advanced_init/row_grouping.html我想添加从数据库到分组列的链接，在示例中链接将是爱丁堡，伦敦等。

在我使用column.render：https://datatables.net/reference/option/columns.render之前添加链接并且它正在运行。正如您在代码中看到的那样，我定位于第1列（正在工作），并希望定位第0列，即（不工作）分组的隐藏列。

第0列被隐藏并包含组名。第3列是隐藏的，包含链接。

以下JS代码：

$(document).ready(function() {
var dataTable = $('#example').DataTable({
"processing": true,
"serverSide": true,
"ajax":{
        url :"example.php", // json datasource
        type: "post",  // method  , by default get
            error: function(){  // error handling
              $(".example-error").html("");
              $("#example").append('<tbody class="example-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
              $("#example_processing").css("display","none");
            }
          },

          "columnDefs": [
          { "visible": false, "targets": [ 0, 3] },
          { "width": "50%", "targets": [ 1, 2 ] },
          { "orderable": false, "targets": [ 1, 2 ] },
          { "targets": 1,
          "data": null,
          "render": function ( data ) {
            return '<a href=//'+data[ 3 ]+' target="_blank">'+data[ 1 ]+'</a>';
          }}
          ],

          "order": [[ 0, 'asc' ]],
          "displayLength": 25,
          "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last = null;

            api.column(0, {page:'current'} ).data().each( function ( group, i ) {
              if ( last !== group ) {
                $(rows).eq( i ).before(
                  '<tr class="group"><td colspan="5">'+group+'</td></tr>'
                  );

                last = group;
              }
            } );
          }
        } );
        } );

谢谢！

Answer 1

<强>解

您需要修改drawCallback功能，如下所示：

api.rows({page:'current'} ).data().each( function ( data, i ) {
   var group = data[0];
   var groupLink = '<a href="' + data[3] + '">' + $('<div>').text(group).html() + '</a>';

   if ( last !== group ) {
      $(rows).eq( i ).before(
         '<tr class="group"><td colspan="5">'+group+'</td></tr>'
      );

      last = group;
   }
});

<强>样本

请参阅this jsFiddle以获取代码和演示。

备注

我还使用了orderFixed，因此该表始终按包含组名的列进行排序（在我的示例中为2）。

如何在Datatables Row Grouping中使用数据源创建链接？

1 个答案: