Bootstrap表格和栅格分页实例详解


Posted in Javascript onMay 20, 2016

拼接table请将以下代码直接运行:换下

bootstrap.css jquery-1.12.3.min.js bootstrap-paginator.min.js"

<!DOCTYPE html>
<html>
<head lang="zh-cn">
<title>产品列表</title>
<meta charset="utf-" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=" />
<meta name="viewport" content="width=device-width, initial-scale=." />
<link href="../bsframework./css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="../bsframework./js/jquery-...min.js" type="text/javascript"></script>
<script type="text/javascript" src="../bsframework./bootstrap-paginator.min.js"></script>
<script>
$(function () {
var index = ;
$.ajax({
url: "xxxx/fun",
datatype: 'json',
type: "Post",
data: "id=" + index,
error: function (data) {
var data = { 'pageCount': '', 'CurrentPage': '', 'list': [{ 'Id': '', 'Name': 'ddd', 'Message': 'vvvvvv' }, { 'Id': '', 'Name': 'ddee', 'Message': 'vvvvvv'}] }
var data = JSON.stringify(data);
if (data != null) {
$("#list").append('<table id="data_table" class="table table-bordered"><thead><tr class="success"><th>Id</th><th>部门名称</th><th>备注</th><th>neirong</th></tr></thead><tbody></tbody></table>'); 
$.each(eval("(" + data + ")").list, function (index, item) { 
$("#list tbody").append('<tr class="success"><td>' + item.Id + '</td><td>' + item.Name + '</td><td><button class="btn btn-small btn-primary" onclick="Edit(' + item.Id + ' );">修改</button><button class="btn" onclick="delete(' + item.Id + ');">删除</button></td><td>' + item.Message + '</td></tr>');
});
var pageCount = eval("(" + data + ")").pageCount; 
var currentPage = eval("(" + data + ")").CurrentPage; 
var options = {
bootstrapMajorVersion: , 
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;
}
}, 
onPageClicked: function (event, originalEvent, type, page) {
$.ajax({
url: "ccccc?id=" + page,
type: "Post",
data: "page=" + page,
error: function (data) {
$("#list").children().remove();
var data = { 'pageCount': '', 'CurrentPage': '', 'list': [{ 'Id': '', 'Name': 'ddd', 'Message': 'vvvvvv' }, { 'Id': '', 'Name': 'ddee', 'Message': 'vvvvvv'}] }
var data = JSON.stringify(data);
$("#list").append('<table id="data_table" class="table table-bordered"><thead><tr class="success"><th>Id</th><th>部门名称</th><th>备注</th><th>neirong</th></tr></thead><tbody></tbody></table>');
if (data != null) {
$.each(eval("(" + data + ")").list, function (index, item) {
$("#list tbody").append('<tr class="success"><td>' + item.Id + '</td><td>' + item.Name + '</td><td><button class="btn" onclick="Edit(' + item.Id + ' );">修改</button><button class="btn" onclick="delete(' + item.Id + ');">删除</button></td><td>' + item.Message + '</td></tr>');
});
}
}
});
}
};
$('#example').bootstrapPaginator(options);
}
}
});
})
</script>
</head>
<body>
<div>
<label>数据列表</label>
<hr />
<div id="list"></div>
<ul id="example"></ul>
</div>
<table class="table table-condensed">
<tr class="success">
<td></td>
<td>TB - Monthly</td>
<td>//</td>
<td>Approved</td>
</tr>
<tr class="success">
<td></td>
<td>TB - Monthly</td>
<td>//</td>
<td>Approved</td>
</tr>
</table>
<div></div>
</body>
</html>

结果

Bootstrap表格和栅格分页实例详解 

注意

1,bootstrap3 分页器id为#example的必须是 ul标签,2,在js中option中bootstrapMajorVersion :3

1,bootstrap2 分页器id为#example的必须是 div标签,2,在js中option中bootstrapMajorVersion :2

分页源码中说明:

Bootstrap表格和栅格分页实例详解

延伸说明

上面我是拼接的表格,你可以拼接成栅格布局,是不是更吊?

拼接栅格示范

$.each(eval("(" + data + ")").list, function (index, item) { 
$("#list").append('<div class="col-sm- col-md-" data-toggle="modal" data-target="#myModal" style="text-align:center;">
<div class="thumbnail" style="height: px;"><a href="javascript:return()">
<img src="../UploadFiles/' + item.picurl + '" width="" height="" ></img></a>
<div class="caption"><h><a href="javascript:return()" target="_blank">' + item.title + '<br><small>by @mdo</small> </a></h>
<p>' + (item.detail == null ? "没有对应描述" : item.detail.substring(, )) + '</p>
</div></div></div>')
});

后台获取的数据格式

{
"pageCount": 2,
"CurrentPage": 1,
"list": [
{
"id": 23,
"title": "印刷业治安管理信息系统",
"detail": "专利号:ZL 222222高工作效率,提升工作品质。"
},
{
"id": 20,
"title": "重点单位来访人员管理系统",
"detail": "专利号:ZL 233形,提高工作效率,提升工作品质。"
}
]
}

以上所述是小编给大家介绍的Bootstrap表格和栅格分页实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 #Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 #Javascript
AngularJS中的指令全面解析(必看)
May 20 #Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 #Javascript
javascript的理解及经典案例分析
May 20 #Javascript
JS中对象与字符串的互相转换详解
May 20 #Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 #Javascript
You might like
一个简单php扩展介绍与开发教程
2010/08/19 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
Python深入学习之装饰器
2014/08/31 Python
Python的Django框架中的Context使用
2015/07/15 Python
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
python正则表达式之对号入座篇
2018/07/24 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
python类共享变量操作
2020/09/03 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
大韩航空官方网站:Korean Air
2017/10/25 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
科室工作的个人自我评价
2013/10/30 职场文书
工作人员思想汇报
2014/01/09 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
研究生毕业鉴定
2014/01/29 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
新闻稿格式范文
2015/07/18 职场文书