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 相关文章推荐
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
js实现简单的计算器功能
Jan 16 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
JS中的const命令你真懂它吗
Mar 08 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
JS实现多功能计算器
2020/10/28 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
Python中的面向对象编程详解(上)
2015/04/13 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
详解Python:面向对象编程
2019/04/10 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
购买一个高级域名:BuyDomains
2018/03/11 全球购物
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
安全标兵事迹材料
2014/08/17 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技