C# Bootstrap table之 分页
效果如图:
一、声明talbe
<div class="container">
<table id="table" class="table table-bordered">
</table>
</div>
二、JS绑定Table值
当前使用的是服务端分页 sidePagination: "server" 。根据数据库的查询结果绑定table数据每次只查询当前显示的行,适合数据量大的程序;还有一种是客户端分页,是一次性查询出所有的内容,然后再分页,客户端分页的模式适合数据量小的程序。client模式的分页还没研究,这里就不演示了。
<script type="text/jscript">
$(function () {
$('#table').bootstrapTable({
//请求方法
method: 'get',
//是否显示行间隔色
striped: true,
//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
cache: false,
//是否显示分页(*)
pagination: true,
//是否启用排序
sortable: true,
//排序方式
sortOrder: "asc",
//初始化加载第一页,默认第一页
pageNumber: ,
//每页的记录行数(*)
pageSize: ,
//可供选择的每页的行数(*)
pageList: [, , , ],
//这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
url: "jgdx.ashx?action=GetJson",
//默认值为 'limit',传给服务端的参数为:limit, offset, search, sort, order Else
//queryParamsType:'',
//查询参数,每次调用是会带上这个参数,可自定义
queryParams: function (params) {
return {
rows: params.limit, //页面大小
page: (params.offset / params.limit) + , //页码
sort: params.sort, //排序列名
sortOrder: params.order //排位命令(desc,asc)
};
},
//分页方式:client客户端分页,server服务端分页(*)
sidePagination: "server",
//是否显示搜索
search: false,
strictSearch: true,
idField: "id",
columns: [{
field: 'rownum',
title: '序号',
align: 'center'
}, {
field: 'dm',
title: '代码',
align: 'center'
}, {
field: 'xm',
title: '姓名',
align: 'center'
}, {
field: 'xb',
title: '性别',
align: 'center'
},{
field: 'mid',
title: '操作',
align: 'center',
formatter: function (value, row, index) {
//通过formatter可以自定义列显示的内容
//value:当前field的值,即id
//row:当前行的数据
var a = '<a href="#" >编辑</a> ';
var b = '<a href="#" >删除</a>';
return a + b;
}
}, {
checkbox: true,
visible: true //是否显示复选框
}],
pagination: true
});
});
</script>
三、后台代码:分页需要加上total和row属性,另外需要获取前台传入的rows和page值,来查询需要的行数。
string sql = "";
DataSet ds = new DataSet();
public void ProcessRequest(HttpContext context)
{
string output = "";
string action = context.Request["action"].ToString();switch (action)
{
case "GetJson":
DataTable dt = getData(context);
string str = DataTableToJsonWithStringBuilder(dt);
output = "{\"total\":" + getCout(context) + ",\"rows\":" + str + "}";
break;default:
break;
} context.Response.ContentType = "text/plain";
context.Response.Write(output);
}public string GetJson(HttpContext context)
{
DataTable dt = getData(context);
return DataTableToJsonWithStringBuilder(dt);
}
public DataTable getData(HttpContext context)
{
int rows = Convert.ToInt32(context.Request["rows"]);//显示行数
int page = Convert.ToInt32(context.Request["page"]);//页码
int starNum = rows * page - rows + ;//开始行数
int endNum = rows * page;//结束行数
string sql = "select * from (select row_number() over(order by @@servername) as rownum,* from yhgl)a where rownum between " + starNum + " and " + endNum + "";
DataSet ds = pub.GetDataset(sql, "xinxi");
return ds.Tables["xinxi"];
}
public int getCout(HttpContext context)
{
string sql = "select count(*) count from yhgl";
DataSet ds = pub.GetDataset(sql, "xinxi");
return Convert.ToInt32(ds.Tables["xinxi"].Rows[]["count"]);
}
public string DataTableToJsonWithStringBuilder(DataTable table)
{
var jsonString = new StringBuilder();
if (table.Rows.Count > )
{
jsonString.Append("[");
for (int i = ; i < table.Rows.Count; i++)
{
jsonString.Append("{");
for (int j = ; j < table.Columns.Count; j++)
{
if (j < table.Columns.Count - )
{
jsonString.Append("\"" + table.Columns[j].ColumnName.ToString()
+ "\":" + "\""
+ table.Rows[i][j].ToString() + "\",");
}
else if (j == table.Columns.Count - )
{
jsonString.Append("\"" + table.Columns[j].ColumnName.ToString()
+ "\":" + "\""
+ table.Rows[i][j].ToString() + "\"");
}
}
if (i == table.Rows.Count - )
{
jsonString.Append("}");
}
else
{
jsonString.Append("},");
}
}
jsonString.Append("]");
}
return jsonString.ToString();
}
C# Bootstrap table之 分页的更多相关文章
- bootstrap table 服务器端分页例子分享
这篇文章主要介绍了bootstrap table 服务器端分页例子分享,需要的朋友可以参考下 1,前台引入所需的js 可以从官网上下载 复制代码代码如下: function getTab(){var ...
- 161222、Bootstrap table 服务器端分页示例
bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...
- [前端插件]Bootstrap Table服务器分页与在线编辑应用总结
先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...
- [转]C# Bootstrap table之 分页
本文转自:https://www.cnblogs.com/zhangjd/p/7895453.html 效果如图: 一.声明talbe <div class="container&qu ...
- [转]Bootstrap table后端分页(ssm版)
原文地址:https://www.cnblogs.com/flyins/p/6752285.html 说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分 ...
- Bootstrap table后端分页(ssm版)
说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分页,即实用limit.性能较好,一般均用这种源码下载地址:https://git.oschina.ne ...
- Bootstrap table前端分页(ssm版)
说明bootstrap table可以前端分页,也可以后端sql用limit分页.前端分页下性能和意义都不大,故一般情况下不用这种,请看我的另一篇后端分页的博客源码下载地址:https://git.o ...
- bootstrap table 服务器端分页--ashx+ajax
1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-T ...
- bootstrap table数据分页查询展示
index.php <html> <head> <link rel="stylesheet" href="./css/bootstrap.m ...
随机推荐
- QT自定义控件插件化简要概述
1.选择 "其他项目"->"Qt4 设计师自定义控件" **最好选中所有的编译器平台,由于目前使用的Qt Creator是MSVC2015 32位,因此要 ...
- npm打包前端项目太慢问题分析以及暂时解决方案
npm build 打包前端项目实际上是执行 node build/build.js,但是随着项目的依赖包越来越多,项目打包时间不断延长,为了改善这个问题,需要从node入手 暂时解决方案:扩大nod ...
- 关于Videodownload helper的下载问题
Videodownload helper是火狐浏览器的一个视频音频嗅探插件, 解压文件的时候处于解压状态还没有解压完的时候不能关闭原来的窗口 所以这个下载软件也同理.没有下载完一个视频之前不能把这个窗 ...
- MongoDB3.6之Replica Set初步体验
Replica Set在国内叫做副本集,简单来说就是一份数据在多个地方存储. 1.为什么要用副本集,什么时候使用副本集? 有人说一份数据在多个地方存储占用了大量的额外空间,是一种浪 ...
- 深入理解Java虚拟机(第2版) 笔记目录
本篇为读深入理解Java虚拟机(第2版)一书的笔记目录. Java 运行期数据区 Java 垃圾回收算法 Java 内存分配策略 Java 类文件结构 Java 加载.链接.初始化 Java 类加载器
- 单元测试er——为什么真的真的要写单元测试
优点 为什么很多技术或者知识要说优点?因为有些道理看着很简单,大家表面上都觉得对,但是做的时候又不去做或者做不到.其中有一个很重要原因是骨子里或者潜意识并没有真实觉得这是对的,一旦想去做的时候同时会冒 ...
- javascript里的循环语句
前序:我一直对于for跟for..in存在一种误解,我觉得for都能把事情都做了,为啥还要for...in...这玩意了,有啥用,所以今天就说说JavaScript里的循环语句. 循环 要计算1+2+ ...
- redhat7.2静默安装Oracle11.2.0.4
redhat7.2静默安装Oracle11.2.0.4我们将oracle安装到/opt/oracle目录下,后面的环境变量则以此为基础.一.设置主机hosts映射vi /etc/hosts[plain ...
- iOS CocoaPods一些特别的用法 指定版本、版本介绍、忽略警告
简介 介绍一些CocoaPods一些特别的用法 CocoaPods github地址 CocoaPods 官方地址 1. 指定第三方库版本 1. 固定版本 target 'MyApp' do use_ ...
- C语言描述二叉树的实现及操作(链表实现)
概述 二叉树为每个节点最多有两个儿子节点(左儿子节点和右儿子节点)的树. 前序遍历:根结点 ---> 左子树 ---> 右子树. 中序遍历:左子树---> 根结点 ---&g ...