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

先上图吧，这就是bootstrap 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数据
 }

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

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