bootstrap的3.x版本需要使用一个<ul></ul>,将其设置为分页组件
是用bootstrap要确保 ,jquery版本是1.8以上
引入CSS和JS,网上都可以找到。
简单demo如下:
用VS2013写的,后台数据读取在.ashx中完成逻辑
HTML相关
<div class="tab-pane fade in active" id="tab1">
<table id="table_EE" class="table table-bordered table-condensed table-hover">
</table>
<div class="page">
<ul id="useroption"></ul>
</div>
</div>
JS相关
function render() {
$.ajax({
url: './Handler.ashx?Action=动作',
data: {
page: 1, //默认第一页
},
type: 'post',
dataType: 'json', //返回json格式到前台
cache: false, //缓存
success: function (result) {
var data = result.data; //拿到需要的数据
var tbody = "<tr style='background:#fff;'><th >ID1</th><th>ID2</th>" +"<th >ID3</th></tr>"; //设置表头
for (var i = 0; i < data.length; i++) { //赋值
var t = '';
t += '<tr><td>' + data[i].ID1 +
'</td><td>' + data[i].ID2 +
'</td><td>' + data[i].ID3 +
'</td></tr>';
tbody += t;
}
$('#table_EE').empty(); //清空表格
$('#table_EE').html(tbody); //动态添加
var currentPage = result.currentPage; //后台取到的数据,当前页码
var pageCount = result.pageCount; //后台数据,总页数
var options = {
bootstrapMajorVersion: 3, //版本
currentPage: currentPage, //当前页数
totalPages: pageCount, //总页数
numberOfPages: 5,
shouldShowPage: true,//是否显示该按钮
itemTexts: function (type, page, current) {
switch (type) { //部分汉化
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return page;
}
},
//点击事件
onPageClicked: function (event, originalEvent, type, page) {
$.ajax({
async: true,
url: './Handler.ashx?Action=动作',
type: 'POST',
data: { page: page }, //事件参数,表示点击的第几页
dataType:'json',
cache: false,
success: function (result) {
var data = result.data;
var tbody = "<tr style='background:#fff;'><th >QRRID</th><th>LOTID</th>" +
"<th >BASIC_SS</th></tr>";
for (var i = 0; i < data.length; i++) {
var t = '';
t += '<tr><td>' + data[i].ID1 +
'</td><td>' + data[i].ID2 +
'</td><td>' + data[i].ID3 +
'</td></tr>';
tbody += t;
}
$('#table_EE').empty();
$('#table_EE').html(tbody);
}
});
}
}
$('#useroption').bootstrapPaginator(options); //表格初始化
}
});
}
$(function(){
render();
});
后台相关
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;
using System.Data;
namespace Anst.Web.QRRManager
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
ResultAction act = new ResultAction();
string str_Action = context.Request["Action"] ?? ""; //获取接口动作
string str_PageIndex = context.Request["page"]; //当前页码
int int_PageSize = 5; //每页显示的数据条数
//从数据库中读取全部数据
DataTable dt = new DataTable();
//计算总页数
int int_RowCount = dt.Rows.Count;
if (int_RowCount % int_PageSize != 0)
{
int_RowCount = int_RowCount / int_PageSize + 1;
}
else
{
int_RowCount = int_RowCount / int_PageSize;
}
//根据选择的页面再次在数据库中进行查询,例如页码2,则查询6-10的数据
act.data = dt;
act.status = true;
act.pageCount = int_RowCount;
act.currentPage = Convert.ToInt32(str_PageIndex);
context.Response.AddHeader("Access-Control-Allow-Origin", "*"); //允许跨域
context.Response.ContentType = "text/plain";
context.Response.Write(JsonConvert.SerializeObject(act));
}
public bool IsReusable
{
get
{
return false;
}
}
//返回前台一个类
class ResultAction
{
public bool status { get; set; }//动作是否成功
public object data { get; set; }//反馈数据信息
public string backmsg { get; set; }//反馈信息
public object pageCount { get; set; } //记录页数
public object currentPage { get; set; } //当前页数
public ResultAction()
{
status = false;
}
}
}
}