所谓分页，是动态的获取数据库的内容，通过数据库的记录来进行分类，比如每页需要显示10条记录，则从数据库获取10条记录，当点击下一页的时候，继续获取接下来10条，这里就设计到一些简单的算法，可以去看下javascript和sql查询语句以及limit的使用,手打，求给分
css+div只能做分页的样式，就是页面效果，不能负责让分页实现，要实现至少需要运用到javascript脚本或其他的！你可以去查查xml的数据岛功能，一个html页面链接到一个xml数据，自动实现分页，很方便很好用，不过只有ie可以显示！
最近做的asp.netMVC项目中需要对数据列表进行分类，这个本来就是基于bootstrap开发的后台，因此也就想着bootstrap是否有分页插件呢，或者说是基于jquery支持的分页功能，这样整体的网站后台风格便能够统一，又不用自己去写一套分页的功能。首先便是要下载Bootstrap Paginator了，github上便有这个的开源项目提供下载：
https://github.com/lyonlai/bootstrap-paginator
首先视图的上面应该需要引入js和css文件，主要有三个文件，分别是bootstrap的css，jquery以及Paginator的js文件。其中网上搜到，貌似jquery必须要1.8版本以上，这个我没有亲自去测试看过。于是视图的文件引用便：
<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="js/bootstrap-paginator.js"></script>
然后，分页的功能当然是一个基于Ajax的局部刷新才能够吸引我们，当然这个便需要jquery的支持。之前自己搞的都是EasyUI的分页，这次也应该有点不同。
<script>
$(function () {
var carId = 1
$.ajax({
url: "/OA/Setting/GetDate",
datatype: 'json',
type: "Post",
data: "id=" + carId,
success: function (data) {
if (data != null) {
$.each(eval("(" + data + ")").list, function (index, item) { //遍历返回的json
$("#list").append('<table id="data_table" class="table table-striped">')
$("#list").append('<thead>')
$("#list").append('<tr>')
$("#list").append('<th>Id</th>')
$("#list").append('<th>部门名称</th>')
$("#list").append('<th>备注</th>')
$("#list").append('<th></th>')
$("#list").append('</tr>')
$("#list").append('</thead>')
$("#list").append('<tbody>')
$("#list").append('<tr>')
$("#list").append('<td>' + item.Id + '</td>')
$("#list").append('<td>' + item.Name + '</td>')
$("#list").append('<td>备注</td>')
$("#list").append('<td>')
$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' )">修改</button>')
$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' )">删除</button>')
$("#list").append('</td>')
$("#list").append('</tr>')
$("#list").append('</tbody>')
$("#list").append('<tr>')
$("#list").append('<td>内容</td>')
$("#list").append('<td>' + item.Message + '</td>')
$("#list").append('</tr>')
$("#list").append('</table>')
})
var pageCount = eval("(" + data + ")").pageCount//取到pageCount的值(把返回数据转成object类型)
var currentPage = eval("(" + data + ")").CurrentPage//得到urrentPage
var options = {
bootstrapMajorVersion: 2, //版本
currentPage: currentPage, //当前页数
totalPages: pageCount, //总页数
itemTexts: function (type, page, current) {
switch (type) {
case "first":
return "首页"
case "prev":
return "上一页"
case "next":
return "下一页"
case "last":
return "末页"
case "page":
return page
}
},//点击事件，用于通过Ajax来刷新整个list列表
onPageClicked: function (event, originalEvent, type, page) {
$.ajax({
url: "/OA/Setting/GetDate?id=" + page,
type: "Post",
data: "page=" + page,
success: function (data1) {
if (data1 != null) {
$.each(eval("(" + data + ")").list, function (index, item) { //遍历返回的json
$("#list").append('<table id="data_table" class="table table-striped">')
$("#list").append('<thead>')
$("#list").append('<tr>')
$("#list").append('<th>Id</th>')
$("#list").append('<th>部门名称</th>')
$("#list").append('<th>备注</th>')
$("#list").append('<th></th>')
$("#list").append('</tr>')
$("#list").append('</thead>')
$("#list").append('<tbody>')
$("#list").append('<tr>')
$("#list").append('<td>' + item.Id + '</td>')
$("#list").append('<td>' + item.Name + '</td>')
$("#list").append('<td>备注</td>')
$("#list").append('<td>')
$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' )">修改</button>')
$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' )">删除</button>')
$("#list").append('</td>')
$("#list").append('</tr>')
$("#list").append('</tbody>')
$("#list").append('<tr>')
$("#list").append('<td>内容</td>')
$("#list").append('<td>' + item.Message + '</td>')
$("#list").append('</tr>')
$("#list").append('</table>')
})
}
}
})
}
}
$('#example').bootstrapPaginator(options)
}
}
})
})
</script>
而在视图的主体部分便有两个div，一个用来呈现数据列表，一个用来放置选择页面的导航。
<div class="span9">
<label>部门列表</label>
<hr />
<div id="list"></div>
<div id="example"></div>
</div>
而后台这个GetDate的方法就像下面这样：
public ActionResult GetDate(int id, int? page)
{
int pageIndex = page ?? 1//当前页
const int pageSize = 2//这里用来设置每页要展示的数据数量，建议把这个写到web.config中来全局控制
//获取需要展示的部门数据
IEnumerable<MODEL.qgoa_department>list = OperateContext.Current.BLLSession.Iqgoa_departmentBLL.GetPagedList(pageIndex, pageSize, x =>x.Id!=null, x=>x.Id)
//得到数据的条数
int rowCount = list.Count()
//通过计算，得到分页应该需要分几页，其中不满一页的数据按一页计算
if(rowCount%pageSize!=0)
{
rowCount = rowCount / pageSize + 1
}
else
{
rowCount = rowCount / pageSize
}
//转成Json格式
var strResult = "{\"pageCount\":"+rowCount+",\"CurrentPage\":"+pageIndex+",\"list\":" + JsonConvert.SerializeObject(list) + "}"
return Json(strResult, JsonRequestBehavior.AllowGet)
}
这个方法还是有点缺陷的，可以写的更加完美，就好像上面那个pageSize这个可以通过读取配置文件web.config来全局修改，这样管理起来也方便，另外对于页面这种属性：页码，当前页，数据数量等等的信息，可以做一个类来存储，如果网站的项目比较大的话，这样更加方便我们去更改自己的代码。
