带有复选框控件的 ASP.Net GridView 和 Jquery dataTable

Question

我正在使用 asp.net gridview 和 jquery dataTable。我已经在 gridview 中实现了 jquery dataTable，如下所示：

                <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="False" class="table table-striped"
                    Width="100%">
                    <Columns>
<%--                        <asp:TemplateField>
                            <HeaderTemplate>
                                <asp:CheckBox ID="chkAll" runat="server"
                                    onclick="checkAll(this);" />
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:CheckBox ID="chk" runat="server"
                                    onclick="Check_Click(this)" />
                            </ItemTemplate>
                        </asp:TemplateField>--%>
                        <asp:BoundField DataField="CustomerID" HeaderText="Customer ID" />
                        <asp:BoundField DataField="ContactName" HeaderText="Name" />
                        <asp:BoundField DataField="Country" HeaderText="Country" />
                    </Columns>
                </asp:GridView>

我的java脚本是这样的：

<script type="text/javascript">
    $(function () {
        $('[id*=gvCustomers]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
            "responsive": true,
            "sPaginationType": "full_numbers",
            "aoColumns": [
            null,
            null,
            { "bSortable": false }
            ]
        });
    });
</script>

我想在侧网格视图中添加带有标题复选框的复选框以检查所有功能。 Jquery dataTable 不允许网格内的模板列。我需要检索复选框的值以进行删除。我还需要一个链接按钮来重定向到网格内的另一个页面。 任何帮助都将被接受。

编辑： 我已经编辑了我的 javascript 代码，例如：

$(function () {
            $('[id*=gvCustomers]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
                columnDefs: [{
                    orderable: false,
                    className: 'select-checkbox',
                    targets: 0,
                    responsive: true,
                    sPaginationType: 'full_numbers'
                }],
                aoColumns: [{ "bSortable": false }, null, null, { "bSortable": false }]
            });
        });

现在我得到以下输出：

在加载过程中，我收到类似“DataTables 警告：非表节点初始化 (INPUT)。有关此错误的更多信息，请参阅 http://datatables.net/tn/2”，但搜索、排序、分页正在运行。 有什么想法吗？

谢谢

帕萨

Answer 1

首先，您的Gridview 标记没有错，尽管格式不正确。我已经在我的机器上本地测试了您的代码并取消注释 TemplateField 代码，因为复选框列本质上就是您要查找的内容。

问题在于您的DataTable 调用。我使用了以下简单的选择器 #gvCustomers 而不是您所拥有的，并且它可以在没有您提到的错误的情况下工作。此外，值得确保您的 aoColumns 数组长度与您拥有的列数相匹配。最后，我觉得在定义DataTable 选项时不需要使用双引号。我们不处理 JSON，所以没有引号是可以的。希望这会有所帮助。

见下文：

$('#gvCustomers').DataTable({
            columnDefs: [{
                orderable: false,
                className: 'select-checkbox',
                targets: 0,
                responsive: true,
                sPaginationType: 'full_numbers'
            }],
            aoColumns: [null, null, { bSortable: false }, null],
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            order: [[1, 'asc']]
        });