zoukankan      html  css  js  c++  java
  • jQuery DataTables 分页

    HTML:==================================================================

     <div class="ibox-content">
                            <div class="thead">                 
                             <input placeholder="请输入搜索内容" id="strWhere" type="text" />
                            </div>
                            <table id="userlist" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                          <th></th>
                                        <th><input type="checkbox" class="checkall" /></th>                               
                                        <th>昵称</th>
                                        <th>电话</th>
                                        <th>性别</th>
                                        <th>年龄</th>
                                        <th>注册日期</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>

    JS:(注:我的jQuery DataTables已经汉化,此处不再配置oLanguage)=====================
    $(function () {
       
        $('#userlist').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: false, //是否启动过滤、搜索功能        
            bServerSide: true,//开启此模式后,你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序(表头)、搜索,这些都会传给服务器相应的值。
            "ajax": {
                url: "/Ajax/UserMgrAjax.ashx?cmd=userList",
                type:"POST",
                data: { "strWhere": $('#strWhere').val() }
                
            } ,
            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 title='编辑' class='glyphicon glyphicon-edit nounderline' href='javascript:editTabRow();'></a>&nbsp;";
                     }
                 }
                 
            ],
            fnDrawCallback: function () {
                
                var startIndex = this.api().context[0]._iDisplayStart;//获取到本页开始的条数
                this.api().column(0).nodes().each(function (cell, i) {
                 //翻页序号连续
                 cell.innerHTML = startIndex + i + 1;

                });
            }
           
        });
        $(".checkall").click(function () {
            var check = $(this).prop("checked");
            $(".checkchild").prop("checked", check);
        });

    });

    .ashx.cs:==================================================================
    namespace SmartAdmin.Ajax
    {
        /// <summary>
        /// UserMgrAjax 的摘要说明
        /// </summary>
        public class UserMgrAjax : IHttpHandler
        {
            string info = "";
            string json = "";
            bool rbool = false;
            HttpContext context;
            JavaScriptSerializer jss = new JavaScriptSerializer();
            Dictionary<string, object> dic = new Dictionary<string, object>();
            public void ProcessRequest(HttpContext context)
            {
                this.context = context;
                context.Response.ContentEncoding = Encoding.GetEncoding("utf-8");//避免出现乱码
                //接收浏览器 get/post 过来的参数cmd
                string cmd = context.Request["cmd"].ToString();
                switch (cmd)
                {
                    case "userList": json = GetUserList();
                        break;
                }
                context.Response.Write(json);
            }
            /// <summary>
            /// 获得用户列表
            /// </summary>
            /// <param name="index"></param>
            /// <returns></returns>
            public string GetUserList()
            {
                #region ===代码===
                int totalCount = 0;//所有的
                int selCount = 0;//根据条件搜索到的
                string sqlSel = RequestHelper.GetQueryString("strWhere");
                List<t_user> list = UserDal.m_UserDal.GetList("");
                totalCount = list.Count;
                int draw = Common.Utils.ToInt(context.Request.Params["draw"]);
                int start = Common.Utils.ToInt(context.Request.Params["start"]);
                int length = Common.Utils.ToInt(context.Request.Params["length"]);
                list = UserDal.m_UserDal.GetList(sqlSel, length, (start / length) + 1);
                selCount = list.Count;
                dic.Add("draw", draw);
                dic.Add("recordsTotal", selCount);
                dic.Add("recordsFiltered", totalCount);
                dic.Add("data", list);
                return jss.Serialize(dic);
                #endregion ===代码===

            }
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }
    }


  • 相关阅读:
    VmWare 安装 Centos
    将博客搬至CSDN
    如何快速学习新的知识
    Git使用说明--常用命令
    App 冷启动:给 Android 的 Activity 添加一个背景
    Proguard中optimize设置不当引发SimException
    完美解决android软键盘监听
    修改Activity的继承类导致程序闪退
    非技术相关的面试技巧(文章内容来自他人博客)
    Android面试题(文章内容来自他人博客)
  • 原文地址:https://www.cnblogs.com/weimingxin/p/8242702.html
Copyright © 2011-2022 走看看