Bootstrap分页插件--Bootstrap Paginator
发布时间：2020-12-17 21:08:13 所属栏目：安全 来源：网络整理
导读：1.在视图上引入bootstrap.css、bootstrap - pageinator.js、jquery.min.js link ? href = "css/bootstrap.css" ? rel "stylesheet" 2. script ? type "text/javascript" ? src "js/jquery-1.8.1.js" / script 3. "js/bootstrap-paginator.js" 2. 在视图的主
|
1.在视图上引入bootstrap.css、bootstrap-pageinator.js、jquery.min.js
<link?href="css/bootstrap.css"?rel"stylesheet">
2.
script?type"text/javascript"?src"js/jquery-1.8.1.js"></script>
3.
"js/bootstrap-paginator.js"
2.在视图的主体部分放两个div，一个用来呈现数据列表，一个用来放置选择页面的导航。
>
<div class="span9">
<label>信息列表</label>
<hr />
<div id="list"></div>
<div id="example"></div>
</div>
3.分页js的编写
<script>
$(function () {
var carId = 1;
$.ajax({
url: "GetData",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>'+item.age+'</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,data: "page=" + page,success: function (data1) {
if (data1 != null) {
$.each(eval("(" + data + ")").list,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>' + item.age+ '</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>
4.
后台处理请求的方法
public String GetDate(int id,int page)
{
int pageIndex = page ;//当前页
const int pageSize = 2;//这里用来设置每页要展示的数据数量，建议把这个写到web.config中来全局控制
//获取需要展示的数据
List<MODEL.qgoa_department> list = OperateContext.Current.BLLSession.Iqgoa_departmentBLL.GetPagedList(pageIndex,pageSize,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);
}
5.Paginator组件参数
公共命令另外该插件还提供了几个公共的命令，可以通过如下方法调用，如：$('#example').bootstrapPaginator("show",3) 调用show命令、$('#example').bootstrapPaginator("getPages") 调用getPages命令
|
| 事件名 | 回调函数 | 描述 |
|---|---|---|
| page-clicked | function(event,?originalEvent,?type,?page) | 同上文。另外，参数event,?originalEvent是俩个jquery事件对象，可参考jquery相关文档 |
| page-changed | function(event,?oldPage,?newPage) | 同上文 |
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!