GridView 与 Jquery 数据表实现

【问题标题】：GridView with Jquery data table implementationGridView 与 Jquery 数据表实现
【发布时间】：2023-03-21 15:19:01
【问题描述】：

最近我试图在一个 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>

【问题讨论】：

标签： c# jquery asp.net webforms

【解决方案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();
});

【讨论】：