带有复选框控制的ASP.Net GridView和Jquery dataTable [英] ASP.Net GridView and Jquery dataTable with checkbox contol

问题描述

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

I am working with asp.net gridview and jquery dataTable. I have implemented jquery dataTable in gridview which is like below:

                <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脚本如下:

My java script is like:

<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不允许网格内的模板列.我需要检索复选框的值以进行删除.我还需要一个链接按钮来重定向到网格内的另一个页面. 任何帮助都将被接受.

I want to add checkbox in side gridview with a header checkbox for check all functionality. Jquery dataTable is not allowing template column inside grid. I need to retrieve values of the checkbox for delete purpose. I also need a link button to redirect to another page inside the grid. Any help will be thankfully accepted.

我已经编辑了如下JavaScript代码:

Edited: I have edited my javascript code like:

$(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 "，但搜索，排序和分页仍然有效. 有什么主意吗?

During loading I am getting a warning like "DataTables warning: Non-table node initialisation (INPUT). For more information about this error, please see http://datatables.net/tn/2" but searching, sorting, paging is working. Any idea?

谢谢

Partha

推荐答案

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

First of all, your Gridview markup is not wrong, albeit poorly formatted. I've tested your code locally on my machine and un-commented the TemplateField code because the checkbox column is essentially what you're looking for.

问题出在您的DataTable调用上.我使用了以下简单的选择器#gvCustomers来代替您所拥有的东西，它可以正常工作而不会出现您提到的错误.另外，值得确保您的aoColumns数组长度与您拥有的列数匹配.最后，我认为在定义DataTable选项时不需要使用双引号.我们不处理JSON，因此不用引号也可以.希望这会有所帮助.

The problem lies in your DataTable invocation. Instead of what you have, I used the following simple selector #gvCustomers and it works without the error you've mentioned. Additionally, it is worth ensuring that your aoColumns array length matches the number of columns that you have. Lastly, I do not feel the need to use double quotations when defining the DataTable options. We are not dealing with JSON, so it's OK to not have the quotations. Hope this helps.

参见下文:

$('#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']]
        });

这篇关于带有复选框控制的ASP.Net GridView和Jquery dataTable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！