GridView 与 Jquery 数据表实现

Posted 2023-05-09

【中文标题】GridView 与 Jquery 数据表实现

【英文标题】：GridView with Jquery data table implementation

【发布时间】：2019-04-20 15:10:46

【问题描述】：

最近我试图在一个 GridView 渲染中使用“https://datatables.net”的功能。这是不可能的，因为渲染总是给出一个没有正确格式的表格（没有thead）。有没有办法将渲染转换为正确的格式？

正确的格式：

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

【参考方案1】：

此代码将一个表格式化为正确的格式，然后在已正确格式化的表上运行.DataTable();。

要使用它，请替换“#gdVscQuote”中表的 ID

如果您正在处理的页面有多个表，这将不起作用，未经测试。

 $(document).ready( function () 
        //replace tr
        $($('#gdVscQuote')[0].childNodes[1].childNodes[0]).wrap('<thead/>').contents().unwrap();
        //replace all td with th inside thead
        $('thead td').wrap('<th/>').contents().unwrap();
        //get thead
        var thead = $("thead").get(0);
        //remove saved thead to replace above tbody thead
        $("thead").remove();
        //add thead correctly
        $('#gdVscQuote')[0].prepend(thead);
        // replace tds for tr
        $($('thead')[0].childNodes).wrapAll("<tr/>")
        //add jQuery table functionality
        $('#gdVscQuote').DataTable();
);