ASP.Net GridView和Jquery dataTable with checkbox contol

时间:2018-02-08 19:36:30

标签: jquery asp.net gridview checkbox datatables

我正在使用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>

我想在侧面gridview中添加一个带有标题复选框的复选框,用于检查所有功能。 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 }]
            });
        });

现在我得到以下输出:

enter image description here

在加载过程中,我收到一条警告,例如&#34; DataTables警告:非表节点初始化(INPUT)。有关此错误的详细信息,请参阅http://datatables.net/tn/2&#34;但搜索,排序,分页工作正常。 有什么想法吗?

由于

帕塔

1 个答案:

答案 0 :(得分:0)

首先,您的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']]
        });