DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 第一次動手實現bootstrap table分頁效果
第一次動手實現bootstrap table分頁效果
編輯:關於JavaScript     

先上圖吧,這就是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數據
 }

如果大家還想深入學習,可以點擊這裡進行學習,再為大家附3個精彩的專題:

Bootstrap學習教程

Bootstrap實戰教程

Bootstrap Table使用教程

Bootstrap插件使用教程

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved