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> ";
}
}
],
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 分页的更多相关文章
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项
引言: 本人想自己个博客网站出来,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之 ...
- jQuery DataTables插件分页允许输入页码跳转
背景说明 项目中使用jQuery DataTables插件来实现分页表格,但是默认的分页样式不能输入页码进行跳转,在页数非常多的时候使用很不方便,最主要的还是没有达到产品部门的设计要求,所以我需要寻找 ...
- jquery.dataTables的探索之路-服务端分页配置
最近闲来无事想研究下数据表格,因为之前接触过layui和bootstrap的数据表格,本着能学多少学多少的学习态度,学习下dataTables的服务端分页配置.特与同学们一块分享下从中遇到的问题和解决 ...
- jquery DataTables表格插件的使用(网页数据表格化及分页显示)
DataTables - 非常强大的 jQuery 表格插件,可变宽页码浏览,现场过滤. 多列排序,自动探测数据类型,智能列宽,可从几乎任何数据源获取数据. 那么在Bootstrap下如何使用Data ...
- jQuery datatables
jQuery datatables 属性,用例 参考:http://datatables.club/example/ http://blog.csdn.net/mickey_miki/article/ ...
- jquery.dataTable分页
jsp页面,引入几个js <link type="text/css" rel="stylesheet" href="/library/css/b ...
- Jquery.Datatables 服务器处理(Server-side processing)
看了看介绍 http://datatables.club/manual/server-side.html 没有经过处理的分页,先显示出来看看效果,就这样写(存储过程自己写) cshtml " ...
- Jquery DataTables相关示例
一.Jquery-DataTables DataTables 是jquery的一个开源的插件.它具有高度灵活的特性,基于渐进增强的基础,可以为任何表格添加交互.它特性如下: 提供分页,搜索和多列排序: ...
随机推荐
- mysql 可重复读
概念 Repeatable Read(可重复读):即:事务A在读到一条数据之后,此时事务B对该数据进行了修改并提交,那么事务A再读该数据,读到的还是原来的内容. 实现原理(MVCC [ 多版本并发控制 ...
- Spring事务管理之几种方式实现事务(转)
一:事务认识 大家所了解的事务Transaction,它是一些列严密操作动作,要么都操作完成,要么都回滚撤销.Spring事务管理基于底层数据库本身的事务处理机制.数据库事务的基础,是掌握Spring ...
- 电路维修 (广搜变形-双端队列bfs)
# 2632. 「BalticOI 2011 Day1」打开灯泡 Switch the Lamp On [题目描述] 有一种正方形的电路元件,在它的两组相对顶点中,有一组会用导线连接起来,另一组则不会 ...
- Spring boot集成Swagger,并配置多个扫描路径
Spring boot集成Swagger,并配置多个扫描路径 1:认识Swagger Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目 ...
- C# 列出并删除一个文件夹下的所有MD5值相同的文件
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- css3 first-of-type选择器以及css3选择器中:first-child与:first-of-type的区别
CSS3 first-of-type选择器 “:first-of-type”选择器类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子 ...
- Java 逻辑运算符相关解析
问:定简单说说 Java 中 & 与 && 有什么区别?| 与 || 呢? 答:& 是位运算符,&& 是布尔逻辑运算符,| 与 || 类似同理.在进行逻 ...
- R语言 Keras Training Flags
在需要经常进行调参的情况下,可以使用 Training Flags 来快速变换参数,比起直接修改模型参数来得快而且不易出错. https://tensorflow.rstudio.com/tools/ ...
- 父工程 pom版本
<!-- 集中定义依赖版本号 --> <properties> <junit.version>4.12</junit.version> <spri ...
- php array_merge()函数 语法
php array_merge()函数 语法 作用:把一个或多个数组合并为一个数组.dd马达选型 语法:array_merge(array1,array2,array3...) 参数: 参数 描述 a ...