zoukankan      html  css  js  c++  java
  • 获取jQuery DataTables 的checked选中行

    $(function () {

    var  tabel = $('#userlist').DataTable({
            destroy: true, //Cannot reinitialise DataTable,解决重新加载表格内容问题  
            bProcessing: true,           //DataTables载入数据时,是否显示‘进度’提示  
            bStateSave: false,          //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态  
            aLengthMenu: [10, 20, 40, 60, 100, 1000], //更改显示记录数选项  
            iDisplayLength: 10,        //默认显示的记录数  
            bInfo: true,              //是否显示页脚信息,DataTables插件左下角显示记录数  
            bPaginate: true,         //是否显示(应用)分页器  
            autoWidth: true,        //是否自适应宽度  
            bScrollCollapse: true, //是否开启DataTables的高度自适应,当数据条数不够分页数据条数的时候,插件高度是否随数据条数而改变  
            sPaginationType: "full_numbers", //详细分页组,可以支持直接跳转到某页  
            bSort: false,        //是否启动各个字段的排序功能  
            bFilter: true,      //是否启动过滤、搜索功能        
            bServerSide: true, //开启此模式后,你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序(表头)、搜索,这些都会传给服务器相应的值。
            "ajax": {
                url: "/Ajax/UserMgrAjax.ashx?cmd=userList",
                type: "POST"

            },
            columns: [
                {
                    "sWidth": "4%",
                    "sClass": "text-center",
                    "data": null,
                    "targets": 0
                },
                 {
                     "sWidth": "4%",
                     "sClass": "text-center",
                     "data": "u_id",
                     "render": function (data, type, full, meta) {//这里就是要显示的checkbox多选框了
                      
                         return '<input type="checkbox"  class="checkchild"  value="' + data + '" />';
                     },
                     "bSortable": false
                 },

                  { "sClass": "text-center", "data": "u_name" },
                 { "sClass": "text-center", "data": "u_tel" },
                 {
                     "sClass": "text-center",
                     "data": "u_sex",
                     "render": function (data, type, row, meta) {

                         var content = "保密";
                         if (data == "1")
                             content = "男";
                         if (data == "2")
                             content = "女";
                         return content;
                     }

                 },
                 { "sClass": "text-center", "data": "u_age" },
                 { "sClass": "text-center", "data": "u_registerdate" },
                 {
                     "sClass": "text-center",
                     "data": "u_state",
                     "render": function (data, type, row, meta) {
                         var content = "非正常";
                         if (data == "0")
                             content = "正常";
                         if (data == "1")
                             content = "锁定";
                         return content;
                     }
                 },
                 {
                     "sClass": "text-center",
                     "data": "u_registerdate",
                     render: function (data, type, row, meta) {
                         
                         return "<a id='edit' title='编辑' class='glyphicon glyphicon-edit nounderline' href='javascript:Edit("+row.u_id+");'></a>";
                     }
                 }

            ],
            //这个应该是重绘的回调函数
            fnDrawCallback: function () {
                var startIndex = this.api().context[0]._iDisplayStart;//获取到本页开始的条数
                this.api().column(0).nodes().each(function (cell, i) {
                    //翻页序号连续
                    cell.innerHTML = startIndex + i + 1;

                });
            },
        });

    //------------------------------------------------------------------------------------------------------------------------------------------

      //删除
        $("#del").click(function () {
            var ids = "";
            $('.checkchild').each(function () {
                if ($(this).is(':checked')) {
                    ids += $(this).val()+",";
                }
            });
            if (ids != "") {
                $.ajax({
                    type: "Post",
                    url: "UserList.aspx/DelUser",
                    //方法传参的写法一定要对,str为形参的名字  
                    data: "{'ids':'" + ids + "' }",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        //返回的数据用data.d获取内容  
                        UserList();
                        layer.msg(data.d);
                    }
                });
            } else {
                layer.msg("请选择行",{offset: ['300px', '700px']});
                return;
            }

        });

    });

  • 相关阅读:
    【转载】sourcetree 克隆项目显示“这是一个无效的源路径”
    【转载】SQL 查询某个数据是否存在
    【转载】windows 静默安装 winpcap
    Linux expect 远程自动登录机器并执行命令
    CentOS 静态编译缺少库文件 /usr/lib/ld: cannot find lxx
    Java常用工具类(随着工作持续更新)
    一些网址笔记
    1 msql的安装和配置
    postgresql 安装和配置
    有管django使用orm 字段报错问题
  • 原文地址:https://www.cnblogs.com/weimingxin/p/8250614.html
Copyright © 2011-2022 走看看