Bootstrap-paginator Pagination Sample Source MVC

Get ready

1. Data: Bootstrap package (including page plug-in bootstrap-paginator.js)

2. Technical solution: Ajax dynamic load paging, partial view, BLL fetch number

Code Template page

@{    Layout = null;} <! DOCTYPE html>
　　
Home
@using learun.entity;@{viewbag.title = "View1"; Layout = "~/views/shared/_layout.cshtml";}        @section scripts{<script type= "Text/javascript" > var limit = 20; function inittable () {$.ajax ({url: '). /systemsetup/loaddata ', type: ' Post ', data: {page:1, limit:limit}, Dataty                    PE: ' HTML ', success:function (data) {$ ("#data_table"). HTML (data); var PageCount = $ (' #datatotle '). Val (); Total pages var options = {Bootstrapmajorversion:3,//version Curr                        Entpage:1,//Current page Totalpages:pagecount,//Total pages numberofpages:5,                                Itemtexts:function (Type, page, current) {switch (type) {                              Case "First": Return "Home";  Case "prev": Return "previous Page";                                Case "Next": Return "next Page";                                Case "Last": Return "End";                            Case "page": Return page; }},//Click event, used to refresh the entire list onpageclicked:function with Ajax (event, Originalevent , type, page) {$.ajax ({url: '). /systemsetup/loaddata ', type: ' Post ', data: {page:page, Li                                    Mit:limit}, DataType: ' HTML ', success:function (data) {                                $ ("#data_table"). HTML (data);                        }                            });  }                    };                  $ (' #pageLimit '). Bootstrappaginator (options);                    }            });        } $ (function () {inittable ();    }); </script>}<div class= "Row Clearfix" > <div class= "col-md-12 column" > <table class= "Table"            ; <thead> <tr> <th> Ref. &LT;/TH                        > <th> name </th> <th>                    Menu </th> <th> level                    </th> <th> Enable </th> <th> Create Time </th> </tr> </the     ad> <tbody id= "data_table" > </tbody>   </table> <div class= "col-md-12 column Text-center" > <ul id= "Pagelimit" ></ul> </div> </div></div>
Page out
@using learun.entity;@{    #region    list<base_module>    data = viewbag.data as list<base_module>;    if (data = = null)    {        data = new list<base_module> ();    }    int btotel = Viewbag.btotel;    #endregion}<input id= "Datatotle" type= "text" hidden= "hidden" value= "@ViewBag. Totle"/> @for (int i = 0; i < data. Count; i++) {    <tr class= "@ (i%2==0?") Active ":") ">        <td>            @ (btotel++)        </td>        <td>            @data [i]. FullName        </td>        <td>            @data [i]. Location        </td>        <td>            @data [i]. Level        </td>        <td>            @ (Data[i]. Enabled = = 1? Enabled: not enabled)        </td>        <td>            @ (Convert.todatetime (data[i). CreateDate). ToString ("Yyyy-mm-dd"))        </td>    </tr>}
Controller
Using learun.business;using learun.business.baseutility;using learun.entity;using learun.utilities;using system.collections.generic;using system.web.mvc;namespace learun.webapp.controllers{Public    class Systemsetupcontroller:controller    {public        base_modulebll BASE_MODULEBLL = new Base_modulebll ();        Public ActionResult Index ()        {            return View ();        }        Public actionresult loaddata (int page, int. limit)        {            int total = 0;            list<base_module> list = Base_modulebll. GetList (out Total, page:page, rows:limit);            Viewbag.data = list;            Viewbag.totle = total;            Viewbag.btotel = (page-1) * limit + 1;            Return Partialview ("LoadData");}}}    
Effect
Bootstrap-paginator Pagination Sample Source MVC