第一次动手实现bootstrap table分页效果

先上图吧，这就是strap table分页效果图

上代码（这一部分是工具栏的，还包括slider滑动条）

 <div class="box-body"><div class="row"> <div class="form-group col-xs-3" style="width: 432px;"><label for="SendUser" class="col-sm-2 control-label">重量</label><div class="col-sm-10"> <div class="nstSlider"id="shapeNstSlider"data-aria_enabled="true"data-range_min="1"data-range_max="3000"data-cur_min="1"data-cur_max="3000"><div id="bar" class="bar"></div><div id="leftGrip" class="leftGrip"></div><div id="rightGrip" class="rightGrip"></div> </div> <div class="input-prepend input-append pull-left"><input class="span2 " id="leftLabel" style="width: 50px;" onblur="leftChange（this）" type="text"><span class="add-on"><em>ct</em></span> </div> <div class="input-prepend input-append pull-right"><input class="span2" id="rightLabel" style="width: 50px;" onblur="rightChange（this）" type="text"><span class="add-on"><em>ct</em></span> </div></div> </div> <div class="form-group col-xs-3" style="width: 432px;"><label for="SendUser" class="col-sm-2 control-label">价格</label><div class="col-sm-10"> <div class="nstSlider"id="priceNstSlider"data-aria_enabled="true"data-range_min="1000"data-range_max="9999999"data-cur_min="1000"data-cur_max="9999999"><div id="priceBar" class="bar"></div><div id="priceleftGrip" class="leftGrip"></div><div id="pricerightGrip" class="rightGrip"></div> </div> <div class="input-prepend input-append pull-left"><input class="span2 " id="priceleftLabel" style="width: 80px;" onblur="priceleftChange（this）" type="text"><span class="add-on"><em>RMB</em></span> </div> <div class="input-prepend input-append pull-right"><input class="span2" id="pricerightLabel" style="width: 80px;" onblur="pricerightChange（this）" type="text"><span class="add-on"><em>RMB</em></span> </div></div> </div></div><div class="row"> <div class="form-group col-xs-3" style="width: 432px;"><label for="ReceiveUser" class="col-sm-2 control-label">切工</label><div class="col-sm-10"> <a class="btn btn-app" h="0" style="background-color: white; width: 57px; height: 40px; line-height: 28px;" onclick="cutChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">EX</a> <a class="btn btn-app" h="0" style="background-color: white; width: 57px; height: 40px; line-height: 28px;" onclick="cutChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">VG</a> <a class="btn btn-app" h="0" style="background-color: white; width: 57px; height: 40px; line-height: 28px;" onclick="cutChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">G</a> <a class="btn btn-app" h="0" style="background-color: white; width: 57px; height: 40px; line-height: 28px;" onclick="cutChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">F</a> <a class="btn btn-app" h="0" style="background-color: white; width: 57px; height: 40px; line-height: 28px;" onclick="cutChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">P</a></div> </div> <div class="form-group col-xs-3" style="width: 432px;"><label class="col-sm-2 control-label">颜色</label><div class="col-sm-10"> <a class="btn btn-app" h="0" style="background-color: white;" onclick="colorChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">D</a> <a class="btn btn-app" h="0" style="background-color: white;" onclick="colorChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">E</a> <a class="btn btn-app" h="0" style="background-color: white;" onclick="colorChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">F</a> <a class="btn btn-app" h="0" style="background-color: white;" onclick="colorChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">G</a> <a class="btn btn-app" h="0" style="background-color: white;" onclick="colorChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">H</a> <a class="btn btn-app" h="0" style="background-color: white;" onclick="colorChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">I</a> <a class="btn btn-app" h="0" style="background-color: white;" onclick="colorChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">J</a> <a class="btn btn-app" h="0" style="background-color: white;" onclick="colorChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">K</a></div> </div></div><div class="row"> <div class="form-group" style="width: 100%; margin-left: -105px;"><label class="col-sm-2 control-label">净度</label><div class="col-sm-10"> <a class="btn btn-app" h="0" style="background-color: white; width: 61px; height: 40px; line-height: 28px;" onclick="clarityChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">IF</a> <a class="btn btn-app" h="0" style="background-color: white; width: 61px; height: 40px; line-height: 28px;" onclick="clarityChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">VVS1</a> <a class="btn btn-app" h="0" style="background-color: white; width: 61px; height: 40px; line-height: 28px;" onclick="clarityChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">VVS2</a> <a class="btn btn-app" h="0" style="background-color: white; width: 61px; height: 40px; line-height: 28px;" onclick="clarityChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">VS1</a> <a class="btn btn-app" h="0" style="background-color: white; width: 61px; height: 40px; line-height: 28px;" onclick="clarityChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">VS2</a> <a class="btn btn-app" h="0" style="background-color: white; width: 61px; height: 40px; line-height: 28px;" onclick="clarityChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">SI1</a> <a class="btn btn-app" h="0" style="background-color: white; width: 61px; height: 40px; line-height: 28px;" onclick="clarityChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">SI2</a> <a class="btn btn-app" h="0" style="background-color: white; width: 61px; height: 40px; line-height: 28px;" onclick="clarityChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">I1</a> <a class="btn btn-app" h="0" style="background-color: white; width: 61px; height: 40px; line-height: 28px;" onclick="clarityChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">I2</a> <a class="btn btn-app" h="0" style="background-color: white; width: 61px; height: 40px; line-height: 28px;" onclick="clarityChange（this）" onmouseover="coChange（this）" onmouseout="coChange（this）">I3</a></div> </div></div> </div></div>

下面是表格的

<table id="reportTable" class="table table-bordered table-striped" style="font-size: 10px;"></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的游标之后的

 function leftChange（obj） {$（"#shapeNstSlider"）.nstSlider（"set_position", $（obj）.val（）, $（"#rightLabel"）.val（））;$（"#reportTable"）.bootstrapTable（"refresh"）; } function rightChange（obj） {$（"#shapeNstSlider"）.nstSlider（"set_position", $（"#leftLabel"）.val（）, $（obj）.val（））;$（"#reportTable"）.bootstrapTable（"refresh"）; } function priceleftChange（obj） {$（"#priceNstSlider"）.nstSlider（"set_position", $（obj）.val（）, $（"#pricerightLabel"）.val（））;$（"#reportTable"）.bootstrapTable（"refresh"）; } function pricerightChange（obj） {$（"#priceNstSlider"）.nstSlider（"set_position", $（"#priceleftLabel"）.val（）, $（obj）.val（））;$（"#reportTable"）.bootstrapTable（"refresh"）; }

这是bootstrap-table带参到后台去的代码

function queryParams（params） { //配置参数var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 pageSize: params.limit, //页面大小 pageNumber: params.pageNumber, //页码 minSize: $（"#leftLabel"）.val（）, maxSize: $（"#rightLabel"）.val（）, minPrice: $（"#priceleftLabel"）.val（）, maxPrice: $（"#pricerightLabel"）.val（）, Cut: Cut, Color: Color, Clarity: Clarity, sort: params.sort, //排序列名 sortOrder: params.order//排位命令（desc，asc）};return temp; }

其它的部分

function colorChange（obj） { //颜色var p = $（obj）.parent（）.children（"a"）;if （$（obj）.css（"background-color"） == "rgb（255, 177, 112）"） { $（obj）.css（"background-color", "white"）; $（obj）.css（"color", "black"）; $（obj）.attr（"h", 1）;} else { $（obj）.css（"background-color", "#FFB170"）; $（obj）.css（"color", "white"）; $（obj）.attr（"h", 0）;}var data = [];for （var i = 0; i < $（p）.length; i++） { var a = $（p）[i]; if （$（a）.attr（"h"） == "1"） {data[i] = $（a）.text（）; }}Color = "";for （var i = 0; i < data.length; i++） { if （data[i] ！= undefined） {Color += """ + data[i] + "","; }}Color = Color.substring（0, Color.lastIndexOf（","））; //颜色条件$（"#reportTable"）.bootstrapTable（"refresh"）; } function clarityChange（obj） { //净度var p = $（obj）.parent（）.children（"a"）;if （$（obj）.css（"background-color"） == "rgb（255, 177, 112）"） { $（obj）.css（"background-color", "white"）; $（obj）.css（"color", "black"）; $（obj）.attr（"h", 1）;} else { $（obj）.css（"background-color", "#FFB170"）; $（obj）.css（"color", "white"）; $（obj）.attr（"h", 0）;}var data = [];for （var i = 0; i < $（p）.length; i++） { var a = $（p）[i]; if （$（a）.attr（"h"） == "1"） {data[i] = $（a）.text（）; }}Clarity = "";for （var i = 0; i < data.length; i++） { if （data[i] ！= undefined） {Clarity += """ + data[i] + "","; }}Clarity = Clarity.substring（0, Clarity.lastIndexOf（","））; //净度条件$（"#reportTable"）.bootstrapTable（"refresh"）; } function coChange（obj） { //改变颜色事件if （$（obj）.css（"background-color"） == "rgb（255, 177, 112）"） { $（obj）.css（"background-color", "white"）; $（obj）.css（"color", "black"）;} else { $（obj）.css（"background-color", "#FFB170"）; $（obj）.css（"color", "white"）;} }

动作方法是这样的

/// <summary>/// 分页数据/// </summary>/// <param name="pageSize">页面大小</param>/// <param name="pageNumber">页码</param>/// <param name="CersNo"></param>/// <param name="StoneID"></param>/// <param name="sort">排序的列名</param>/// <param name="sortOrder">排序的命令方式</param>/// <returns></returns>/// pageSize,pageNumber请不要更改变量名（sort,sortOrder如需排序，请使用这两个参数，不可更改变量名）public ActionResult AjaxPage（string minSize, string maxSize, string minPrice, string maxPrice, string Shape, string Color, string Cut, string Clarity, int? pageSize, int? pageNumber, string sort, string sortOrder）{//自己写里面的，返回的是Json数据}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。