Home >Web Front-end >JS Tutorial >Detailed explanation of examples of rowspan implementation ideas in DataTables

Detailed explanation of examples of rowspan implementation ideas in DataTables

零下一度Original: 2017-07-18 16:21:282726browse

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to get the style attribute value of an element?Next article：How to get the style attribute value of an element?

See more

Detailed explanation of examples of rowspan implementation ideas in DataTables

Related articles