The first time to implement bootstrap table paging effect _javascript Skills

First, this is the strap table pagination effect chart

On the code (this part is the toolbar, also includes the slider 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" > Weight </label> <div class= "col-sm-10" > <di V class= "Nstslider" id= "Shapenstslider" data-aria_enabled= "true" data-range_min= "1" data-range_max= "3000" data-c ur_min= "1" data-cur_max= "3000" > <div id= "Bar" class= "bar" ></div> <div id= "Leftgrip" class= "Leftgri" P "></div> <div id=" Rightgrip "class=" Rightgrip "></div> </div> <div class=" Input-prepen D input-append pull-left "> <input class=" span2 "id=" Leftlabel "style=" width:50px; "onblur=" Leftchange (This) Typ e= "text" > <span class= "add-on" ><em>ct</em></span> </div> <div class= "Input-prep" End 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 Co L-xs-3 "style=" WIDTH:432PX; " > <label for= "senduser" class= "Col-sm-2 Control-label" > Price </label> <div class= "col-sm-10" > <di
  V 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= "Pricele
  Ftgrip "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:80p" x; "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= "Pricerightla Bel "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-g Roup col-xs-3 "style=" WIDTH:432PX; > <label for= "receiveuser" class= "Col-sm-2 Control-label" > Cut </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" > Color </label> <div class= "col-sm-10" > <a class= "btn btn-a PP "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" > Net </label> <div class= "col-sm-10" > <a class= "btn btn-a PP "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>

Here is the table

<table id= "reporttable" class= "table table-bordered table-striped" style= "font-size:10px;" ></table>

This is part of the table.

 $ (' #reportTable '). Bootstraptable ({method: ' post ', url: '/qstock/ajaxpage ', DataType: ' json ', striped:true,//Make table with Stripe pagination:true,///At the bottom of the table displays the Pagination toolbar pagesize:22, pagenumber:1, pagelist: [A, M, MB,], IDfield: "Pro Ductid ",//identify which field ID primary key Showtoggle:false,//Business card format cardview:false,//when set to True to display the card layout showcolumns:true,//Show hidden columns sh Owrefresh:true,//Show refresh button singleselect:true,//check box to select only one record search:false,//whether to display the search box in the upper right corner clicktoselect:true,//Click on the line to select a single selection /check box sidepagination: "Server",//table pagination position queryparams:queryparams,//Parameter queryparamstype: "Limit",//parameter format, send standard restful type Parameter Request toolbar: "#toolbar",//Set toolbar ID or class Columns:column,//Column silent:true,//Refresh event must be set formatloadingmessage:funct
 Ion () {return "Please wait a moment, loading ...";
 }, Formatnomatches:function () {//No matching results return ' no qualifying records ';
 }, Onloaderror:function (data) {$ (' #reportTable '). Bootstraptable (' RemoveAll '); }, Onclickrow:function (row) {window.location.href = "/qstock/qproinfo/" + row. ProDuctid; 
 },
 });

This part is 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 '); 

 }
 });

This part is after changing the slider cursor.

 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 ');
  

This is bootstrap-table with the backstage code.

 function Queryparams (params) {//configuration parameters
 var temp = {//Here's the name of the key and the controller's variable name must always, this side changes, the controller also needs to be changed to the same
 pageSize: Params.limit,//page size
 pageNumber:params.pageNumber,//Page
 minsize: $ ("#leftLabel"). Val (),
 maxSize: $ ("# Rightlabel "). Val (),
 Minprice: $ (" #priceleftLabel "). Val (),
 Maxprice: $ (" #pricerightLabel "). Val (),
 cut : Cut,
 Color:color,
 clarity:clarity,
 sort:params.sort,//Sort column name
 sortorder:params.order// Rank command (DESC,ASC)
 };
 return temp;
 } 

The other part

 function Colorchange (obj) {//color 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 (', '));
 Color Condition $ ("#reportTable"). Bootstraptable (' refresh ');
 function Claritychange (obj) {//net degree 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 (', '));
 NET condition $ ("#reportTable"). Bootstraptable (' refresh '); function Cochange (obj) {//Change color event if ($ (obj). css ("background-color") = = "RGB (255, 177, 112)") {$ (obj). css ("Backgrou
 Nd-color "," white ");
 $ (obj). CSS ("Color", "black");
 } else {$ (obj). css ("Background-color", "#FFB170");
 $ (obj). CSS ("Color", "white"); 

 }
 }

That's the way it moves.

 <summary>
 ///pagination data
 ///</summary>
 ///<param name= "pageSize" > Page size </param>
 ///<param name= "pagenumber" > Page </param>
 ///<param name= "Cersno" ></param>
 /// <param name= "Stoneid" ></param>
 ///<param name= "Sort" > Sorted column name </param>
 ///<param Name= "SortOrder" > Order mode </param>
 ///<returns></returns>
 ///pageSize, PageNumber Please do not change the variable name (Sort,sortorder if you want to sort, use both arguments, immutable variable names) 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)
 {//write it yourself, return the JSON data
 }

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Table Use Tutorial

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.