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 相关文章推荐
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
为Extjs加加速(javascript加速)
Aug 19 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
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新手上路(七)
2006/10/09 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
接口中的方法可以是abstract的吗
2015/07/23 面试题
高中数学教师求职信
2013/10/30 职场文书
中医临床专业自我鉴定范文
2014/01/15 职场文书
初中科学教学反思
2014/01/21 职场文书
2014和解协议书范文
2014/09/15 职场文书
小学教师自我评价
2015/03/04 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
物业接待员岗位职责
2015/04/15 职场文书
天那边观后感
2015/06/09 职场文书
工作感言一句话
2015/08/01 职场文书
PyMongo 查询数据的实现
2021/06/28 Python
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers