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;
            }
        }
    }
}

jQuery DataTables 分页的更多相关文章

  1. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  2. ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项

    引言: 本人想自己个博客网站出来,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之 ...

  3. jQuery DataTables插件分页允许输入页码跳转

    背景说明 项目中使用jQuery DataTables插件来实现分页表格,但是默认的分页样式不能输入页码进行跳转,在页数非常多的时候使用很不方便,最主要的还是没有达到产品部门的设计要求,所以我需要寻找 ...

  4. jquery.dataTables的探索之路-服务端分页配置

    最近闲来无事想研究下数据表格,因为之前接触过layui和bootstrap的数据表格,本着能学多少学多少的学习态度,学习下dataTables的服务端分页配置.特与同学们一块分享下从中遇到的问题和解决 ...

  5. jquery DataTables表格插件的使用(网页数据表格化及分页显示)

    DataTables - 非常强大的 jQuery 表格插件,可变宽页码浏览,现场过滤. 多列排序,自动探测数据类型,智能列宽,可从几乎任何数据源获取数据. 那么在Bootstrap下如何使用Data ...

  6. jQuery datatables

    jQuery datatables 属性,用例 参考:http://datatables.club/example/ http://blog.csdn.net/mickey_miki/article/ ...

  7. jquery.dataTable分页

    jsp页面,引入几个js <link type="text/css" rel="stylesheet" href="/library/css/b ...

  8. Jquery.Datatables 服务器处理(Server-side processing)

    看了看介绍 http://datatables.club/manual/server-side.html 没有经过处理的分页,先显示出来看看效果,就这样写(存储过程自己写) cshtml " ...

  9. Jquery DataTables相关示例

    一.Jquery-DataTables DataTables 是jquery的一个开源的插件.它具有高度灵活的特性,基于渐进增强的基础,可以为任何表格添加交互.它特性如下: 提供分页,搜索和多列排序: ...

随机推荐

  1. 关于Python程序的运行方面,有什么手段能提升性能?

    1.使用多进程,充分利用机器的多核性能 2.对于性能影响较大的部分代码,可以使用C或C++编写 3.对于IO阻塞造成的性能影响,可以使用IO多路复用来解决 4.尽量使用Python的内建函数 5.尽量 ...

  2. SCUT - 38 - 屠场的秘密 - 分解

    https://scut.online/p/38 要求是2016的倍数,把每个数分解成有2016的倍数和余数,两数余数的乘积是2016的倍数,则原数的乘积也是2016的倍数.

  3. 配置sde使可以使用sde sql(ST_Geometry)操作空间数据

    用处:进行此配置后,可以用sql语言,与sde空间数据库进行空间查询,增删改图层的要素等 PS:同时也是解决 ORA-28595Extproc 代理 DLL 路径无效 的方法 ORA-06512: 在 ...

  4. C# String的几种比较方法对比(Compare,CompareTo, CompareOrdinal、Equals)

    原文:http://blog.csdn.net/wushang923/article/details/7527499 注意点:切换方法的时候要注意返回值引起的变化!!! 1.Compare会通过传递进 ...

  5. C#中ComboBox动态绑定赋值

    http://www.crifan.com/csharp_combobox_data_dynamic_binding/ C#中,已有一个List,想要动态的,绑定到ComboBox中. [解决过程] ...

  6. 微信jssdk配置的问题,使用MVC制作的demo

    一,view代码 <script src="~/Scripts/jquery-3.3.1.js"></script> <script src=&quo ...

  7. java 企业 网站源码 后台 springmvc SSM 前台 静态化 代码生成器

    前台: 支持四套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问 ...

  8. d3与echarts的区别

    1. 目前各大公司的大数据平台多使用d3还是echarts?什么时候适合用echarts,什么时候适合用d3? 在我看几种数据可视化平台多使用折线图,面积图和柱状图,条图居多,对于echarts和d3 ...

  9. JSP学习(2)

    JSP学习(2) JSP简介 Java Server Page,其根本是一个简单Servlet设计. 常用的动态网站开发技术 JSP:安全性高,适合开发大型的,企业级或分布式的Web应用程序. Asp ...

  10. canvas toBlob ,ie兼容

    /* canvas-toBlob.js * A canvas.toBlob() implementation. * 2016-05-26 * * By Eli Grey, http://eligrey ...