BootstrapTable分页（二）

看完上篇博客相信看完你对bootstrapTable的使用也有了进一步的认识，我们来看看bootstrapTable是怎么分页的

先看页面

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>bootstrap-table-demo</title><!-- 引入bootstrap样式 --><link rel="stylesheet" href="css/bootstrap.min.css" /><!-- 引入bootstrap-table样式 --><link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" /><!-- layer --><link rel="stylesheet" href="js/plugins/layer/skin/layer.css" /><style type="text/css">.form-inline .form-group input[type=text], .form-inline .form-group select{width:120px;}</style></head><body style="width: 90%;margin: 0 auto;"><h2>bootstrap-table</h2><form id="form1" action="" method="get" class="form-inline"><div class="form-group"><label class="control-label ">ID：</label><input type="text" id="id" class="form-control" name="id" /></div><div class="form-group"><label class="control-label ">Name：</label><input type="text" id="name" class="form-control" name="name" /></div><div class="form-group"><label class="control-label ">Price：</label><!--<input type="text" id="price" class="form-control" name="price" />--><select class="form-control" id="price" name="price"><option value="0">请选择</option><option value="1">$1</option><option value="2">$2</option><option value="3">$3</option><option value="4">$4</option></select></div><input type="submit" class="btn btn-primary" value="搜索"/></form><br/><div id="toolbar" class="btn-group"><button class="btn btn-success" id="add">新增</button><button class="btn btn-warning" id="edit">编辑</button><button class="btn btn-info" id="look">查看</button><button class="btn btn-danger" id="remove">删除</button></div> <!--bootstrap-table表格--><table id="table" data-toolbar="#toolbar"data-toggle="table"     data-search="false"     data-side-pagination="client" data-pagination="true" data-click-to-select="true" data-single-select="true"data-page-size= "3"><thead style="background:#efefef;"><tr><th data-checkbox="true"></th><th data-field="id">ID</th><th data-field="name">Name</th><th data-field="price">Price</th></tr></thead></table><!-- jquery --><script type="text/javascript" src="js/jquery.min.js" ></script><!-- bootstrap --><script type="text/javascript" src="js/bootstrap.min.js" ></script><!-- bootstrap-table --><script type="text/javascript" src="js/plugins/bootstrap-table/bootstrap-table.min.js" ></script><!-- 引入中文语言包 --><script type="text/javascript" src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" ></script><!-- layer --><script type="text/javascript" src="js/plugins/layer/layer.min.js" ></script><script type="text/javascript">var $table = $("#table");$(function(){//$table.bootstrapTable('load', [{"id": 1,"name": "Item 0","price": "$0"}]);load();});//加载数据function load(){var params = [{"id": 1,"name": "Item 1","price": "$1"}, {"id": 2,"name": "Item 2","price": "$1"}, {"id": 3,"name": "Item 3","price": "$2"}, {"id": 4,"name": "Item 4","price": "$3"}, {"id": 5,"name": "Item 5","price": "$3"},{"id": 6,"name": "Item 6","price": "$2"}, {"id": 7,"name": "Item 7","price": "$1"},{"id": 8,"name": "Item 8","price": "$4"},{"id": 9,"name": "Item 9","price": "$3"},{"id": 10,"name": "Item 10","price": "$4"},{"id": 11,"name": "Item 11","price": "$2"},{"id": 12,"name": "Item 12","price": "$3"}];console.log(params)$table.bootstrapTable('load', params);}/*** 获得选中的*/function getIdSelections() {return $.map($table.bootstrapTable('getSelections'), function(row) {return row.id;});}//刷新$("#btnRefresh").on('click', function(){$table.bootstrapTable('refresh');//$("#btnRefresh").hide();});//添加$("#add").on('click', function(){//$("#btnRefresh").prop('disabled', true);//$("#btnRefresh").hide();layer.open({type: 2,title: '添加商品',shadeClose: false,shade: 0.8,area: ['50%', '60%'],content: 'add.html'});});    //查看$("#look").on('click', function(){var ids = getIdSelections();//alert(ids);layer.open({type: 2,title: '查看商品',shadeClose: false,shade: 0.8,area: ['50%', '60%'],content: 'edit.html?id=' + ids+'&type=look'});});//编辑$("#edit").on('click', function(){var ids = getIdSelections();//alert(ids);layer.open({type: 2,title: '编辑商品',shadeClose: false,shade: 0.8,area: ['50%', '60%'],content: 'edit.html?id=' + ids});});//删除$("#remove").on('click', function(){var ids = getIdSelections();layer.confirm('您是否要删除当前 ' + ids.length + '条数据？', {btn: ['是', '否']}, function() {del(ids);});});/*** 删除* @param {Object} ids*/function del(ids){layer.msg('删除成功');}</script></body>
</html>

edit.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>编辑客户</title><!-- 引入bootstrap样式 --><link rel="stylesheet" href="css/bootstrap.min.css" /><!-- 引入bootstrap-table样式 --><link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" /><style type="text/css">.form-group{width:90%;margin: 15px auto;}</style></head><body><div><form id="form1" action="" method="get" class=""><div class="form-group"><label class="control-label ">ID：</label><input type="text" id="id" class="form-control" name="id" /></div><div class="form-group"><label class="control-label ">Name：</label><input type="text" id="name" class="form-control" name="name" /></div><div class="form-group"><label class="control-label ">Price：</label><!--<input type="text" id="price" class="form-control" name="price" />--><select class="form-control" id="price" name="price"><option value="0">请选择</option><option value="1">$1</option><option value="2">$2</option><option value="3">$3</option><option value="4">$4</option></select></div><div class="form-group"><input type="submit" id="submit" class="btn btn-primary" style="width: 25%;" value="修改"/><input type="button" id="close" class="btn btn-danger" style="width: 25%;" value="关闭"/></div></form></div>    <!-- jquery --><script type="text/javascript" src="js/jquery.min.js" ></script><script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script><!-- leyer --><script type="text/javascript" src="js/plugins/layer/layer.min.js" ></script><script type="text/javascript">/*** 从url获取参数* @param {Object} $*/(function ($) {$.getUrlParam = function (name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if (r != null) return unescape(r[2]); return null;}})(jQuery);//alert($.getUrlParam('id'));$("#close").on('click', function(){var index = parent.layer.getFrameIndex(window.name);parent.layer.close(index);});//var typelook = $.getUrlParam("type");//初始化数据initData();if(typelook){$("#submit").hide();$("input").attr('disabled',true);$("select").attr('disabled',true);$('#close').attr('disabled', false);}function initData(){var id = $.getUrlParam('id');var name = $.getUrlParam('name');var price = $.getUrlParam('price');$('#id').val(id);$('#name').val(id);$('#price').val(id);}$(function(){});</script></body>
</html>

bootstrapTable可以自定义ajax方法，通过ajax请求获得数据返回展示在bootstrapTable表格中

bootstrapTable自定义ajax方法 https://blog.csdn.net/csdnluolei/article/details/84191733

BootstrapTable分页（二）相关推荐

BootstrapTable分页（一）
bootstrapTable分页 <!DOCTYPE html> <html><head><meta charset="utf-8" /& ...
php bootstraptable分页,Bootstrap table分页问题汇总【附答案代码】
本篇文章为大家总结了几个使用bootstrap table实现分页时可能会遇到的问题,希望能够对大家有所帮助. 问题1 :服务器端取不到form值,querystring没有问题,但是request. ...
php bootstraptable分页,php+bootstrap+dataTable+jquery分页列表
$(document).ready(function(){ $("#table_local").dataTable({ "bSort":true, " ...
bootstraptable 分页循环_关于bootstrap-table服务端分页问题
昨天项目中涉及到了前端表格分页问题.数据一共有1万多条,所以选择了后端分页. 之前用的都是前端分页,第一次使用后端分页.网上也找到了一些例子,最后做出来了. 这里用的是bootstrap-table插 ...
BootStrap-Table分页参数传不到后台，后台接收分页参数为null
最近自己整合了个springBoot小项目,使用bootstrap作为后端ui框架,但是在使用bootstrap-table时出现分页参数失效的问题,前台显示参数正常传递,但是后台接收值一直为null ...
处理bootstrap-table分页复选框选中获取表单数据
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
ExtJs_关于combobox的那些分页二三事
近来项目需求,在新增或查询的时候有一个标签对象需要使用下拉菜单,但是数据可多可少的.少了的时候看起来还不错,紧凑一点.但是一旦躲起来看着就那么别扭了.人说百度不可靠,我发现这话真没错,想着做个分页来解 ...
Django框架深入了解_04(DRF之url控制、解析器、响应器、版本控制、分页)(二)
解析器介绍: 所谓解析器,就是前端传过来的数据,后端可以解析,从request.data中取出来,默认的解析器配置是三种编码格式都可以取回到顶部解析器的作用: 根据请求头(content-type ...
BootstrapTable分页参数
var p={}; //分页 p.page = params.data.offset / params.data.limit + 1; p.size = params.data.limit;

BootstrapTable分页（二）

BootstrapTable分页（二）相关推荐

最新文章

热门文章