有了jsRender

寫在前面

         說來也很巧， 下午再做一個頁面，再普通不過的分頁列表，我還是像往常一樣，基於MVC環境下，我正常用PagedList.MVC AJAX做無刷新分頁，這時候問題就來了，列表數據中有個輪播圖用到了slides.js插件，輪播圖也用到了分頁，數據第一頁輪播圖頁碼能正常使用，數據列表翻到第二頁則輪播圖的頁碼就無法正常使用，實際上PagedList.MVC自帶的樣式文件已經和slides.j自帶的樣式文件沖突，我還特意修改了slides.js的樣式文件，然並無卵用，讓郁悶飛一會。。。

 

1、基於MVC PagedList.MVC的分頁寫法

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

var  currentPage = 1;          $( function  () {                //工具欄綁定頁碼              currentPage = $( '.pagination li.active' ).text();              currentPage = $( '.pagination li.active' ).text();              $( 'body' ).on( 'click' ,  '.pagination li:not(".active")' ,  function  (e) {                  var  txtnum = $( this ).text();                  if  (parseInt(txtnum) > 0) {                      DoSearch(txtnum);                  }  else  if  (txtnum ==  '»' ) {                      DoSearch(parseInt(currentPage) + 1);                  }  else  if  (txtnum ==  '«' ) {                      DoSearch(parseInt(currentPage) - 1);                  }  else  if  (txtnum ==  '««' ) {                      DoSearch(1);                  }  else  if  (txtnum ==  '»»' ) {                      var  pagenum = $( this ).find( 'a' ).attr( "href" ).replace(/[^\d]+/gi,  '' );                      DoSearch(pagenum);                  }                  return  false ;              });          });   //列表復合查詢條件 function  DoSearch(page) {           var  item = {};           if  (page) {              item.pageIndex = page;            }              PostData(item);            }   //重點就是這個方法，用於AJAX分頁效果，主要是利用頁面攜帶的數據來循環替換 function  PostData(objdata) {           $.post( '/Home/Index?rdm='  + Math.random(), objdata,  function  (d) {                 //1、替換頁面內列表數據                  $( ".contentajax" ).html($(d).find( ".contentajax" ).html());                 //2、替換頁碼                 $( ".ajaxpage" ).html($(d).find( ".ajaxpage" ).html());                  currentPage = $( '.pagination li.active' , $(d)).text();            });   }

　　

2、郁悶時在園子里看到一位朋友發的jq分頁插件

      http://www.cnblogs.com/Jusoc/p/4757079.html#3254097 這是他的文章，他在文章中提到這個jq分頁插件，插件的樣式是仿照bootstrap做的，API用起來還算是比較方便。 

 

3、效果圖

4、 理論再華麗還是要用coding來實踐

       我按照這位朋友文章中寫到的用法以及查看API寫了個demo，發現程序沒有報錯就是沒有數據，他提到remote參數中包含3個事件:beforeSend、success、complete，注釋中寫到在success中處理后台返回的數據，也就是個json串，json串中必須包含數據總數(total或count)。 我在demo中看到這三個時間不起來作用，不知道這位伙計自己實踐了沒有，於是我查看插件源碼，發現源碼中只有一個callback事件，在這里處理返回的數據，OK，解決了數據返回問題。

      下面問題又來了，由於是分頁，還算是比較正常的需求，那么這時候我就發現，通常的做法肯定是直接在callback中foreach,各種拼接字符串、單引號、雙引號。 我拼着拼着自己就拼不下去了，我接着看這個插件的DEMO，該插件的pageIndex是從0開始，好多插件都是從1開始，所以基於linq的分頁一般都這樣寫：((pageIndex-1)*pageSize)，那如果是0的話就不用減了。 再API的下方一個概念吸引了我的眼球：如何呈現返回的數據，介紹一款jq模版插件，只需定義呈現模版，一行js搞定數據呈現，其實js模版倒不是多么陌生，只是以前沒去用過，覺的拼接jq就很牛氣了，沒想到這個模版這么大的魅力。 而且一定程度上這個模版的思想就像Angularjs的數據操作方式一樣。

      糾結了這半天我又重新把DEMO寫了一遍，搞定。 DEMO雖簡單，但是帶給我的收獲缺很大， 我會重構我們的項目，並且推廣前台嘗試這種方式。

 

5、關鍵地方處理代碼

 1 @{
 2     ViewBag.Title = "Index";
 3     Layout = "~/Views/Shared/_Layout.cshtml";
 4 }
 5 <style>
 6     h2
 7     {
 8         margin-left:80px;
 9     }
10 </style>
11 <link href="~/Content/bootstrap.css" rel="stylesheet" />
12 <link href="~/Content/jquery.pagination.css" rel="stylesheet" />
13 <h2>jq Pagination and js Template</h2>
14 <div class="container">
15     <table id="rsTable" class="table table-striped">
16         <thead>
17             <tr>
18                 <th>ID</th>
19                 <th>Name</th>
20                 <th>Price</th>
21             </tr>
22         </thead>
23         <tbody id="rsbody">
24 
25         </tbody>
26 
27     </table>
28     <div id="pager" class="m-pagination"></div>
29 </div>
30 
31 <script src="~/Scripts/jsrender.min.js"></script>
32 <script src="~/Scripts/jquery.pagination-1.2.1.js"></script>
33 <script type="text/javascript">
34     $(function () {
35 
36         $("#pager").page({
37             remote: {
38                 url: '/Home/AjaxList', //請求地址
39                 param: {},             //請求參數
40                 callback: function (data) {
41                     //回調函數，處理返回值
42                     var modelList = data.modelList;
43                     $("#rsbody").empty().html($("#trTmpl").render(modelList));
44                 },
45                 pageIndexName: 'pageIndex',
46                 pageSizeName: 'pageSize',
47                 totalName: 'total'
48             },
49             pageSize: 3
50         });
51     });
52 </script>
53 <script type="text/x-jsrender" id="trTmpl">
54     <tr>
55        <td>{{:ID}}</td>
56        <td>{{:Name}}</td>
57        <td>{{:Price}}</td>
58     </tr>
59 </script>

 

 

 public ActionResult Index()
        {
            return View();
        }

        public JsonResult AjaxList()
        {
            int pageIndex = Convert.ToInt16(Request["pageIndex"]);
            int pageSize = Convert.ToInt16(Request["pageSize"]);
            IList<Product> list = new List<Product>()
            {
                new Product{ID=1,Name="iphone6 plus",Price=6999},
                new Product{ID=2,Name="iphone6",Price=4999},
                new Product{ID=3,Name="MX5",Price=1799},
                new Product{ID=4,Name="MEILAN NOTE",Price=799},
                new Product{ID=5,Name="XIAOMI 2S",Price=1299}
            };

            IList<Product> modelList = list.Skip(pageIndex * pageSize).Take(pageSize).ToList();
            int count = list.Count;

            var strJson = new JsonResult();
            strJson.Data = new
            {
                modelList=modelList,
                total=count
            };
            strJson.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

            return strJson;
        }

 

總結

    雖說是做了個分頁的demo，但是在使用這個分頁插件的過程中，卻發現了js模版插件這個好東西，寫法簡潔而且頁面jq也簡潔不少。 以前還寫過一片基於MVC Angularjs分頁。多多對比，根據自己需要使用。

    下載鏈接：http://yunpan.cn/cmfE7xgsWqqKV  訪問密碼 4d30