数据表 - 使用嵌套的独立表向下钻取行

Question

是否有人使用DataTables向下钻取行和嵌套的独立表？与powerTable相似？

你能发布任何链接/例子吗？

Answer 1

这是我的JSFiddle(按"运行"显示图标),它实现了独立的嵌套jQuery DataTables.在这种情况下,我只是复制原始表的html,并将其发布到Details行,以节省制作新表的麻烦.

这是代码中唯一有趣的部分,它使NestedTables与简单的DrillDown不同:

else {      /* Open this row */

            this.src = "http://i.imgur.com/d4ICC.png";

            // fnFormatDetails() pieces my Table together, instead you can 
            // use whatever code you like to create your nested Table html
            oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, TableHtml), 'details');

            // ... and here I cast dataTable() on the newly created nestedTable 
            oInnerTable = $("#exampleTable_" + iTableCounter).dataTable({
                "bJQueryUI": true,
                "sPaginationType": "full_numbers"
            });
            iTableCounter = iTableCounter + 1;
        }

请注意如何独立地对每个表进行过滤,排序等.

Answer 2

我建立在Rafael Cichocki优秀的jsfiddle之上,添加动态数据和两个不同的数据表,以强调详细信息表可以与主表不同的事实:

http://jsfiddle.net/headwinds/zz3cH/

$('#exampleTable tbody td img').live('click', function () {
            var nTr = $(this).parents('tr')[0];
            var nTds = this;

            if (oTable.fnIsOpen(nTr)) {
                /* This row is already open - close it */
                this.src = "http://i.imgur.com/SD7Dz.png";
                oTable.fnClose(nTr);
            }
            else {
                /* Open this row */
                var rowIndex = oTable.fnGetPosition( $(nTds).closest('tr')[0] ); 
                var detailsRowData = newRowData[rowIndex].details;

                this.src = "http://i.imgur.com/d4ICC.png";
                oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, detailsTableHtml), 'details');
                oInnerTable = $("#exampleTable_" + iTableCounter).dataTable({
                    "bJQueryUI": true,
                    "bFilter": false,
                    "aaData": detailsRowData,
                    "aoColumns": [
                    { "mDataProp": "name" },
                    { "mDataProp": "team" },
                    { "mDataProp": "server" }
                ],
                    "bPaginate": false,
                    "oLanguage": {
                        "sInfo": "_TOTAL_ entries"
                    }
                });
                iTableCounter = iTableCounter + 1;
            }
        });

Answer 3

我的@Rafael和@Headwinds的嵌套数据表版本,但带有新API的Datatables版本1.10.11.也使用bootstrap.两者都是最好的.

请参见嵌套数据表1.10.11.

 $('#opiniondt tbody td.details-control').on('click', function () {
     var tr = $(this).closest('tr');
     var row = table.row( tr );   

     if ( row.child.isShown() ) {
         //  This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
     }
     else {
        // Open this row
        row.child( format(iTableCounter) ).show();
        tr.addClass('shown');
        // try datatable stuff
        oInnerTable = $('#opiniondt_' + iTableCounter).dataTable({
            data: sections, 
            autoWidth: true, 
            deferRender: true, 
            info: false, 
            lengthChange: false, 
            ordering: false, 
            paging: false, 
            scrollX: false, 
            scrollY: false, 
            searching: false, 
            columns:[ 
               { data:'refCount' },
               { data:'section.codeRange.sNumber.sectionNumber' }, 
               { data:'section.title' }
             ]
        });
        iTableCounter = iTableCounter + 1;
    }
 });