Detailed explanation of examples of rowspan implementation ideas in DataTables

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>

 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();
                }
            }
        }]
    });

##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!