jquery easyui datagrid 加載已有得資料翻頁 rownumber不變的解決辦法

今天遇見了這麼個問題

使用easyui的datagrid加載已經頁面上已有的資料時，加載什麼的問題，翻頁資料也更新，但是rownumber始終是從1到10；

應該有不少同仁都遇見過這個問題，之前度娘始終沒找到争取答案，不知道是沒有還是度娘不給看，索性自己想了個解決辦法；

正常情況下我們都是這麼寫的：

$("#infoTable").datagrid({ 

        title:"批量查詢結果", 

        rownumbers:true, 

        fitColumns:true, 

        pagination:true, 

        data:data.slice(0,10), 

        columns:[

          [ 

            {field:'field1', align:"center", title:"field1Name",width:150},

            {field:'field2', align:"center", title:"field2Name",width:150},

            {field:'field3', align:"center", title:"field3Name",width:150},

            {field:'field4', align:"center", title:"field4Name",width:100},

            {field:'field5', align:"center", title:"field5Name",width:100}

          ] 

        ] 

      });

pager = $("#deviceTable").datagrid("getPager"); 

      pager.pagination({

        total: deviceList.length, 

        onSelectPage:function (pageNo, pageSize) {

          var start = (pageNo - 1) * pageSize; 

          var end = start + pageSize; 

          $("#deviceTable").datagrid("loadData", pageList.slice(start, end)); 

          pager.pagination('refresh', { 

            total:deviceList.length, 

            pageNumber:pageNo 

          }); 

        } 

      });

為了現實row number，會增加一個rownumbers:true, 

如果每次翻頁都是請求連結，就不會出現rownumber不變化的情況，但是如果是實用頁面上已有的資料，翻頁就會出現我所說的問題，

解決方案就是在這個onSelectPage裡面做文章，用firebug可以看到row number的值都是放在class為 datagrid-cell-rownumber的div中

那麼幹脆就直接把這些div拿出來，然後自己算個序号出來，修改div中的值

代碼如下

var rowNumbers = $('.datagrid-cell-rownumber');

          $(rowNumbers).each(function(index){

         var row = parseInt($(rowNumbers[index]).html()) + parseInt(start);

          $(rowNumbers[index]).html("");

          $(rowNumbers[index]).html(row);

          });

這樣就可以完美解決這個問題，下面是完整的代碼

var pager = $("#infoTable").datagrid("getPager"); 

      pager.pagination({ 

        total:data.length, 

        onSelectPage:function (pageNo, pageSize) { 

          var start = (pageNo - 1) * pageSize; 

          var end = start + pageSize; 

          $("#infoTable").datagrid("loadData", data.slice(start, end)); 

          var rowNumbers = $('.datagrid-cell-rownumber');

          $(rowNumbers).each(function(index){

         var row = parseInt($(rowNumbers[index]).html()) + parseInt(start);

          $(rowNumbers[index]).html("");

          $(rowNumbers[index]).html(row);

          });

          pager.pagination('refresh', { 

            total:data.length, 

            pageNumber:pageNo 

          }); 

        } 

      });

注意順序，先loadData，再去修改row number的值，如果順序反了，那麼你會發現沒生效，實際是生效的，隻是修改的是前一頁資料的序号，

到此問題解決，如果有更好辦法的同學，請指教