Example of Bootstrap paginator paging plug-in

ASP. in the netmvc project, you need to classify the data list. This is originally the background developed based on Bootstrap. Therefore, you need to consider whether Bootstrap has a paging plug-in, or whether it is based on the paging function supported by jquery, in this way, the overall website background style can be unified without having to write a set of paging functions.

The first step is to download Bootstrap paginator, which is available on GitHub:

Https://github.com/lyonlai/bootstrap-paginator

First, JS and CSS files should be introduced above the view. There are three main files: Bootstrap CSS, jquery, and paginator JS files. I found it on the Internet. It seems that jquery must be of version 1.8 or later. I have not personally tested it. The file reference of the view is as follows:

<link href="css/bootstrap.css" rel="stylesheet"><script type="text/javascript" src="js/jquery-1.8.1.js"></script><script type="text/javascript" src="js/bootstrap-paginator.js"></script>

Then, the paging function is of course an Ajax-based partial refresh to attract us. Of course, this requires jquery support. Previously, I used easyui paging. This time it should be a bit different.

 

<SCRIPT> $ (function () {var carid = 1; $. ajax ({URL: "/OA/setting/getdate", datatype: 'json', type: "Post", data: "id =" + carid, success: function (data) {If (Data! = NULL) {$. each (eval ("(" + Data + ")"). list, function (index, item) {// traverse the returned JSON $ ("# List "). append ('<Table id = "data_table" class = "Table-striped">'); $ ("# List "). append ('<thead>'); $ ("# List "). append ('<tr>'); $ ("# List "). append ('<TH> id </Th>'); $ ("# List "). append ('<TH> Department name </Th>'); $ ("# List "). append ('<TH> remarks </Th>'); $ ("# List "). append ('<TH> & nbsp; </Th>'); $ ("# List "). append ('</tr>'); $ ("# List "). append ('</Thead>'); $ ("# List "). append ('<tbody>'); $ ("# List "). append ('<tr>'); $ ("# List "). append ('<TD>' + item. ID + '</TD>'); $ ("# List "). append ('<TD>' + item. name + '</TD>'); $ ("# List "). append ('<TD> remarks </TD>'); $ ("# List "). append ('<TD>'); $ ("# List "). append ('<button class = "BTN-warning" onclick = "Edit (' + item. ID + '); "> modify </button>'); $ (" # List "). append ('<button class = "BTN-warning" onclick = "Edit (' + ite M. ID + '); "> Delete </button>'); $ (" # List "). append ('</TD>'); $ ("# List "). append ('</tr>'); $ ("# List "). append ('</tbody>'); $ ("# List "). append ('<tr>'); $ ("# List "). append ('<TD> content </TD>'); $ ("# List "). append ('<TD>' + item. message + '</TD>'); $ ("# List "). append ('</tr>'); $ ("# List "). append ('</table>');}); var pagecount = eval ("(" + Data + ")"). pagecount; // get the value of pagecount (convert the returned data to the object type) var currentpage = eval ("(" + Data + ")"). currentpage; // get urrentpage var Options = {bootstrapmajorversion: 2, // version currentpage: currentpage, // current page totalpages: pagecount, // total page number itemtexts: function (type, page, current) {Switch (type) {Case "first": Return "Homepage"; Case "Prev": Return "Previous Page"; Case "Next": Return "next page "; case "last": Return "last page"; Case "page": Return page ;}}, // click an event to refresh the onpageclicked: function list using Ajax. (Event, originalevent, type, page) {$. Ajax ({URL: "/OA/setting/getdate? Id = "+ Page, type:" Post ", data:" page = "+ Page, success: function (data1) {If (data1! = NULL) {$. each (eval ("(" + Data + ")"). list, function (index, item) {// traverse the returned JSON $ ("# List "). append ('<Table id = "data_table" class = "Table-striped">'); $ ("# List "). append ('<thead>'); $ ("# List "). append ('<tr>'); $ ("# List "). append ('<TH> id </Th>'); $ ("# List "). append ('<TH> Department name </Th>'); $ ("# List "). append ('<TH> remarks </Th>'); $ ("# List "). append ('<TH> & nbsp; </Th>'); $ ("# List "). append ('</tr>'); $ ("# List "). append ('</thead>'); $ ("# List "). append ('<tbody>'); $ ("# List "). append ('<tr>'); $ ("# List "). append ('<TD>' + item. ID + '</TD>'); $ ("# List "). append ('<TD>' + item. name + '</TD>'); $ ("# List "). append ('<TD> remarks </TD>'); $ ("# List "). append ('<TD>'); $ ("# List "). append ('<button class = "BTN-warning" onclick = "Edit (' + item. ID + '); "> modify </button>'); $ (" # List "). append ('<button class = "BTN-warning" onclick = "Edit (' + item. ID + '); "> Delete </button>'); $ (" # List "). append ('</TD>'); $ ("# List "). append ('</tr>'); $ ("# List "). append ('</tbody>'); $ ("# List "). append ('<tr>'); $ ("# List "). append ('<TD> content </TD>'); $ ("# List "). append ('<TD>' + item. message + '</TD>'); $ ("# List "). append ('</tr>'); $ ("# List "). append ('</table>') ;}}}) ;}};$ ('# example '). bootstrappaginator (options) ;}}}) ;}) </SCRIPT>

There are two divs in the main part of the view. One is used to present the data list and the other is used to place the navigation of the selected page.

<Div class = "span9"> <label> Department List </label> <HR/> <Div id = "list"> </div> <Div id = "example"> </div>

The getdate method in the background is like the following:

Public actionresult getdate (int id, Int? Page) {int pageindex = page ?? 1; // the current page const int pagesize = 2; // set the number of data to be displayed on each page. We recommend that you write this to the Web. in config, global control is enabled. // obtain the Department data that needs to be displayed. ienumerable <model. qgoa_department> List = operatecontext. current. bllsession. iqgoa_departmentbll.getpagedlist (pageindex, pagesize, x => X. ID! = NULL, x => X. ID); // The number of data records obtained. Int rowcount = List. count (); // after calculation, the page size should be divided into several pages. If (rowcount % pagesize! = 0) {rowcount = rowcount/pagesize + 1;} else {rowcount = rowcount/pagesize;} // convert it to the JSON format var strresult = "{\" pagecount \": "+ rowcount +", \ "currentpage \": "+ pageindex +", \ "list \": "+ jsonconvert. serializeobject (list) + "}"; return JSON (strresult, jsonrequestbehavior. allowget );}

This method is still a bit flawed and can be written more perfectly, as if the above pagesize can be read through the Web configuration file. config to make global modifications, which makes it easy to manage. In addition, you can store the page attributes such as page number, current page, and data quantity in a class, if the project on the website is large, it is easier for us to change our code.

The final result is as follows:

Summary:

Although there is not much content, it does take me a lot of time, mainly because the development document of the bootstrap plug-in has not been found for a long time. Unlike easyui, there are not many files, in addition, the example is also detailed in the document. xmfdsh I am planning to find a time to summarize my own paging practices, so that I don't have to worry about these well-written frameworks.

Example of Bootstrap paginator paging plug-in