Detailed explanation of examples of rowspan implementation ideas in DataTables-JS Tutorial-php.cn

Detailed explanation of examples of rowspan implementation ideas in DataTables

零下一度

Release： 2017-07-18 16:21:28

Original

2722 people have browsed it

Let’s just look at the example

<table id="example" class="display table table-bordered" cellspacing="0" width="600" style="margin-top: 50px"><thead><tr><th>Name</th><th>Position</th><th>Age</th></tr></thead></table>

Copy after login

 var dataSet = [
        [ "Tiger Nixon",  "Edinburgh",20,1  ],
        [ "Garrett Winters", "Tokyo",22,2],
        [ "Ashton Cox", "Tokyo",21,0 ]
            ];

    $('#example').DataTable({
        data: dataSet,
        paging: true,
        searching:false, //搜索栏lengthChange : false, //是否允许改变每页显示的数据条数ordering:false,
        columnDefs: [{
            targets: 1,
            createdCell: function (td, cellData, rowData, row, col) {var rowspan = rowData[3];if (rowspan > 1) {
                    $(td).attr('rowspan', rowspan)
                }if (rowspan == 0) {
                    $(td).remove();
                }
            }
        }]
    });

Copy after login

##Explanation: To achieve special effects like rowspan/colspan, you need to use Go to the createdCell callback function. This function can be configured in the column.render configuration or in columnDefs. This example is implemented using the columnDefs configuration. The specific principle is that when creating a cell, whether to control how to render the rowspan value needs to be defined in the background. This requires the background to find a way to give this value.

The background gives the idea of rowspan:

Construct a Map map for the attributes that need to be grouped, traverse the list to get the map, and then traverse the list to set rowspan= map.get(key), get the key and set it to 0, OK, done

The above is the detailed content of Detailed explanation of examples of rowspan implementation ideas in DataTables. For more information, please follow other related articles on the PHP Chinese website!