The latest asp.netMVC project requires the classification of data lists. This is originally a backend developed based on bootstrap, so I wonder whether bootstrap has a paging plug-in, or a paging function supported by jquery, so that the overall website backend style can be unified without having to write a set of paging functions by yourself.
The first thing is to download Bootstrap Paginator. Download address: Bootstrap Paginator Paginator Plugin
First of all, the js and css files should be introduced above the view. There are three main files, namely the css, jquery and Paginator's js files. I searched online and it seems that jquery must be version 1.8 or above, I have never tested this in person. So the file reference of the view is:
<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 pagination function is of course a local refresh based on Ajax to attract us, and of course this requires the support of jquery. I used to do EasyUI paging, and 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) { //Transtraight the returned json $("#list").append('<table id="data_table">'); $("#list").append('<tead>'); $("#list").append('<tr>'); $("#list").append('<th>Id</th>'); $("#list").append('<th>Department Name</th>'); $("#list").append('<th>Remarks</th>'); $("#list").append('<th>Remarks</th>'); $("#list").append('<th></th>'); $("#list").append('</tr>'); $("#list").append('</tr>'); $("#list").append('<tbody>'); $("#list").append('<tr>'); $("#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 onclick="Edit(' + item.Id + ' );">Modify</button>'); $("#list").append('<button 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>'); }); var pageCount = eval("(" + data + ")").pageCount; //Get the value of pageCount (convert the return data to object type) var currentPage = eval("(" + data + ")").CurrentPage; //Get urrentPage var options = { bootstrapMajorVersion: 2, //Version currentPage: currentPage, //Current pages totalPages: pageCount, //Total pages 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 event, used to refresh the entire list list through Ajax onPageClicked: function (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) { //Transtraight the returned json $("#list").append('<table id="data_table">'); $("#list").append('<th>'); $("#list").append('<th>Id</th>'); $("#list").append('<th>Id</th>'); $("#list").append('<th>Department Name</th>'); $("#list").append('<th>Remarks</th>'); $("#list").append('<th>Remarks</th>'); $("#list").append('<th>Remarks</th>'); $("#list").append('<th>'); $("#list").append('<tr>'); $("#list").append('<td>' + item.Id + '</td>'); $("#list").append('<td>' + item.Name + '</td>'); $("#list").append('<td>'); $("#list").append('<td>'); $("#list").append('<button onclick="Edit(' + item.Id + ' );">Modify</button>'); $("#list").append('<button onclick="Edit(' + item.Id + ' );">Modify</button>'); $("#list").append('<button onclick="Edit(' + item.Id + ' );">Delete</button>'); $("#list").append('</td>'); $("#list").append('</tr>'); $("#list").append('</tbody>'); $("#list").append('<tr>'); $("#list").append('<td>'); $("#list").append('<td>' + item.Message + '</td>'); $("#list").append('</tr>'); $("#list").append('</tr>'); } } }); } } }; } }; $('#example').bootstrapPaginator(options); } } } }); })</script>In the main part of the view, there are two divs, one for presenting the data list and the other for placing the navigation of the selection page.
<div> <label>Department List</label> <hr /> <div id="list"></div> <div id="example"></div> </div>
The GetDate method in the background is like this:
public ActionResult GetDate(int id, int? page) { int pageIndex = page ?? 1;//The current page const int pageSize = 2;//This is used to set the number of data to be displayed on each page. It is recommended to write this to web.config for global control//Get the department data to be displayed IEnumerable<MODEL.qgoa_department> list = OperateContext.Current.BLLSession.Iqgoa_departmentBLL.GetPagedList(pageIndex, pageSize, x => x.Id!=null, x=>x.Id); //Get the number of data int rowCount = list.Count(); //Through calculation, it is necessary to divide the page into several pages. The data that is less than one page is calculated according to one page if(rowCount%pageSize!=0) { rowCount = rowCount / pageSize + 1; } else { rowCount = rowCount / pageSize; } //Convert to 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, just like the pageSize above can be modified globally by reading the configuration file web.config, which is convenient to manage. In addition, for information such as page attributes: page number, current page, data quantity, etc., you can make a class to store information. If the website's project is larger, it will be more convenient for us to change our own code.
The final display effect is as follows:
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is the usage of the Bootstrap Paginator paging plug-in that I shared with you. I hope it will be helpful for you to master the usage of the Bootstrap Paginator paging plug-in.