Question

我一直在尝试按照以下链接中描述的这种行分组方法。 http://www.datatables.net/examples/advanced_init/row_grouping.html

然而，在实现drawCallback函数时，我必须将名称更改为“fnDrawCallback”，以便我的数据表识别此函数，并将var api声明为var api = this.oApi._fnGetTrNodes（settings）;而不是示例中描述的方式（var api = this.api（）;），否则我收到错误。但是现在，如果我按照示例中给出的语法和关键字定义函数的其余部分，我仍然会遇到类似的错误。也就是说，

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

我得到的错误是drawCallback函数的“未定义不是函数”。我尝试了很多尝试找到一种不同的编写相同功能的方法但我无法理解为什么这不起作用以及为什么我也必须更改api声明。

我对此非常陌生，所以如果有人能解释在没有此错误的情况下编写此函数的正确格式，我将非常感激！

请找到下面列出的我的Jquery部分。在此先感谢!!

$(document).ready(function(){
    var oTable = $("#tableTenants").dataTable({
        "bProcessing": true,

        "sAjaxSource": "/api/alltenantstatistic.json?iDisplayStart=0&iDisplayLength=${totalCount}&sSortDir_0=asc",
        "aoColumns": [

                      { "mDataProp": "state","sClass": "student_rows" , "sWidth":"1%" },
                      { "mDataProp": "name","sClass": "student_rows" , "sWidth":"20%"},
                      { "mDataProp": "testAdmin","sClass": "student_rows" , "sWidth":"70%"},
                      { "mDataProp": "totalStudentCount","sClass": "select_rows" , "sWidth":"2%", "bSortable": false },
                      { "mDataProp": "totalPnPStudentCount","sClass": "select_rows" , "sWidth":"2%", "bSortable": false }
                     ],

        "aoColumnDefs": [
                        {   "fnRender": function(oObj) {
                                  return '<a href="#">' + oObj.aData.state + '</a>';

                                 },
                            "bUseRendered": false,
                            "aTargets": [0]
                         },
                        {   
                            "aTargets": [1],
                             "bVisible": false
                        },
                            ],                  
                        "iDisplayLength": 10,
                        "order": [[ 1, 'asc' ]],
                         "fnDrawCallback": function ( settings ) {
                             console.log("hello");
                             var api = this.oApi._fnGetTrNodes( settings ); // Had to change this from this.api();
                             var rows = api.rows({page:'current'}).nodes(); // Giving an error 
                                                         var last=null;
                                                          api.column(1, {page:'current'} ).data().each( function ( group, i ) {
                                                          if ( last !== group ) {
                                                                  $(rows).eq( i ).before(
                                                                     '<tr class="group"><td colspan="4">'+group+'</td></tr>'
                                                           );

                    last = group;
                }
            } );

                         }, 
                        "bLengthChange": true,
                        "bFilter": true,
                        "bAutoWidth": false,
                        //"bStateSave": true,
                        "sDom": "<'row-fluid'<'span5'l><'span7'f><'span2'>r>t<'row-fluid'<'span6'i><'span6'p>>",

                        "sPaginationType":  "bootstrap",
                        "oLanguage": {
                            "sLengthMenu": "_MENU_",
                            "sEmptyTable": "No Organization Uploads available for this Tenant",
                            "sInfoEmpty": "",
                            "sProcessing": "Loading..."
                        }
    });

Answer 1

由于jquery数据表版本问题。使用下面的库和代码

<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="//datatables.net/release-datatables/extensions/ColReorder/js/dataTables.colReorder.js"></script>


"drawCallback": function (settings) {
                var api = this.api();
                var rows = api.rows({ page: 'current' }).nodes();
                var last = null;
                api.column(1, { page: 'current' }).data().each(function (group, i) {
                    if (last !== group) {
                        $(rows).eq(i).before(
                            '<tr class="group"><td colspan="3">' + group + '</td></tr>'
                        );
                        last = group;
                    }
                });
            },

数据表中的行分组不起作用

1 个答案: