先上图吧，这就是bootstrap table分页效果图
上代码（这一部分是工具栏的，还包括slider滑动条）
<div> <div> <div> <label for="SendUser">重量</label> <div> <div data-aria_enabled="true" data-range_min="1" data-range_max="3000" data-cur_min="1" data-cur_max="3000"> <div></div> <div></div> <div></div> </div> <div> <input onblur="leftChange(this)" type="text"> <span><em>ct</em></span> </div> <div> <input onblur="rightChange(this)" type="text"> <span><em>ct</em></span> </div> </div> </div> <div> <label for="SendUser">价格</label> <div> <div data-aria_enabled="true" data-range_min="1000" data-range_max="9999999" data-cur_min="1000" data-cur_max="9999999"> <div></div> <div></div> <div></div> </div> <div> <input onblur="priceleftChange(this)" type="text"> <span><em>RMB</em></span> </div> <div> <input onblur="pricerightChange(this)" type="text"> <span><em>RMB</em></span> </div> </div> </div> </div> <div> <div> <label for="ReceiveUser">切工</label> <div> <a h="0">EX</a> <a h="0">VG</a> <a h="0">G</a> <a h="0">F</a> <a h="0">P</a> </div> </div> <div> <label>颜色</label> <div> <a h="0">D</a> <a h="0">E</a> <a h="0">F</a> <a h="0">G</a> <a h="0">H</a> <a h="0">I</a> <a h="0">J</a> <a h="0">K</a> </div> </div> </div> <div> <div> <label>净度</label> <div> <a h="0">IF</a> <a h="0">VVS1</a> <a h="0">VVS2</a> <a h="0">VS1</a> <a h="0">VS2</a> <a h="0">SI1</a> <a h="0">SI2</a> <a h="0">I1</a> <a h="0">I2</a> <a h="0">I3</a> </div> </div> </div> </div> </div>
下面是表格的
<table></table>
这一部分是表格的
$('#reportTable').bootstrapTable({ method: 'post', url: '/qStock/AjaxPage', dataType: "json", striped: true, //使表格带有条纹 pagination: true, //在表格底部显示分页工具栏 pageSize: 22, pageNumber: 1, pageList: [10, 20, 50, 100, 200, 500], idField: "ProductId", //标识哪个字段为id主键 showToggle: false, //名片格式 cardView: false,//设置为True时显示名片（card）布局 showColumns: true, //显示隐藏列 showRefresh: true, //显示刷新按钮 singleSelect: true,//复选框只能选择一条记录 search: false,//是否显示右上角的搜索框 clickToSelect: true,//点击行即可选中单选/复选框 sidePagination: "server",//表格分页的位置 queryParams: queryParams, //参数 queryParamsType: "limit", //参数格式,发送标准的RESTFul类型的参数请求 toolbar: "#toolbar", //设置工具栏的Id或者class columns: column, //列 silent: true, //刷新事件必须设置 formatLoadingMessage: function () { return "请稍等，正在加载中..."; }, formatNoMatches: function () { //没有匹配的结果 return '无符合条件的记录'; }, onLoadError: function (data) { $('#reportTable').bootstrapTable('removeAll'); }, onClickRow: function (row) { window.location.href = "/qStock/qProInfo/" + row.ProductId; }, });
这一部分是slider的
$('#shapeNstSlider').nstSlider({ "left_grip_selector": "#leftGrip", "right_grip_selector": "#rightGrip", "value_bar_selector": "#bar", "value_changed_callback": function (cause, leftValue, rightValue, prevLeft, prevRight) { var $grip = $(this).find('#leftGrip'), whichGrip = 'left grip'; if (leftValue === prevLeft) { $grip = $(this).find('#rightGrip'); whichGrip = 'right grip'; } $(this).parent().find('#leftLabel').val(leftValue / 100); $(this).parent().find('#rightLabel').val(rightValue / 100); $("#reportTable").bootstrapTable('refresh'); } }); $('#priceNstSlider').nstSlider({ "left_grip_selector": "#priceleftGrip", "right_grip_selector": "#pricerightGrip", "value_bar_selector": "#priceBar", "value_changed_callback": function (cause, leftValue, rightValue, prevLeft, prevRight) { var $grip = $(this).find('#priceleftGrip'), whichGrip = 'left grip'; if (leftValue === prevLeft) { $grip = $(this).find('#pricerightGrip'); whichGrip = 'right grip'; } $(this).parent().find('#priceleftLabel').val(leftValue); $(this).parent().find('#pricerightLabel').val(rightValue); $("#reportTable").bootstrapTable('refresh'); } });
这一部分是改变slider的游标之后的