DataTables 全选

动态生成的元素绑定事件

$("#example").on('click', "#checkall", function () {  //代码   }

 

获取动态生成的元素

$("#example").find("#checkall").prop("checked", flag);

 

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DatatablesDemo.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <%--<link href="plugins/DataTables/css/jquery.dataTables.css" rel="stylesheet" />--%>
    <link href="plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="plugins/DataTables/css/dataTables.bootstrap.min.css" rel="stylesheet" />
</head>
<body style="padding:50px 0;">
     <!-- 表格开始 -->
    <table id="example" class="table table-striped table-bordered table-hover table-responsive">
        
    </table>
    <!-- 表格结束 -->
    <script src="plugins/DataTables/js/jquery.js"></script>
    <script src="plugins/DataTables/js/jquery.dataTables.min.js"></script>
    <script src="plugins/DataTables/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#example').DataTable({
                "ajax": "data/objects.ashx?key=getArea",
                "language": {
                    "url": "http://cdn.datatables.net/plug-ins/1.10.16/i18n/Chinese.json"
                },
                "order": [[1, "asc"]],
                "columns": [
                    {
                        data: null,
                        className: "text-center",  
                        title: "<input type='checkbox' name='checklist' id='checkall'/>"
                    },
                    { data: "id",title:"序号" },
                    { data: "MobileNumber", title: "手机号码" },
                    { data: "MobileArea", title: "所属地区" },
                    { data: "MobileType", title: "运营商" },
                    { data: "AreaCode", title: "地区码" },
                    { data: "PostCode", title: "传输码" }
                ],
                "columnDefs": [{
                    //   指定第一列，从0开始，0表示第一列，1表示第二列……
                    targets: 0,
                    render: function (data, type, row, meta) {
                        return '<input type="checkbox" name="checklist" value="' + row.id + '" />'
                    }
                }, {
                    "orderable": false, "targets": [0, -1],  //设置第一列和最后一列不可排序
                }]
            });


            //全选
            $("#example").on('click', "#checkall", function () {
                $("input[name='checklist']").prop("checked", $(this).prop("checked"));
            });

            //全选框是否选中
            $("#example").on('click', "input[name='checklist']:not('#checkall')", function () {
                var flag = true;
                $("#example").find("input[name='checklist']:not('#checkall')").each(function () {
                    if (!this.checked) {
                        flag = false;
                    }
                });
                $("#example").find("#checkall").prop("checked", flag);
            });

        });
</script>
</body>
</html>

 

posted @ 2017-10-26 00:28  linyongqin  阅读(529)  评论(0)  编辑  收藏  举报