Home > Web Front-end > JS Tutorial > body text

Detailed explanation of examples of rowspan implementation ideas in DataTables

零下一度
Release: 2017-07-18 16:21:28
Original
2635 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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!