slickgrid服务端分页原生解决办法

大家好~ 最近珊妹因为工作需要，又学习了一个前端表格插件哦！那就是slickgrid,老实说，珊妹也是第一次听说这个插件呢，因为这个插件使用的人实在是太少了，能查到的资料也少之又少呢，那就自己研究呗~

首先需要去官网下载他的组件包，https://github.com/6pac/SlickGrid/wiki

我下载的2.4.22版本，也是目前最新的版本了，下载下来的example文件下都是它的一些示例，可以参考。。。但是呢，大家都知道网站的分页，我们一定要做服务端分页吧，不然数据多的时候，页面就要崩溃了，然后珊妹就找这个插件支持的服务端分页，可是网上搜到的方法试了试，他们都写的是类似这种

但是官网给到的资料里并没有PagerSvr的控件，这就很头疼了，所以最后珊妹的解决办法就是，用这个插件展示数据，分页用js写的原生的分页，或许可能对这个插件也是不够了解，没有找到更合适的方法，所以欢迎大家提供方案，我们共同学习，共同进步~

以下是原生分页代码：

html:

<ul id='ul' style="float: left;">

        <li>首页</li>

        <li>上一页</li>

        <li class="firstpage"></li>

        <li class="secondpage"></li>

        <li class="thirdpage"></li>

        <li>下一页</li>

        <li>尾页</li>

</ul>

css:

#ul{font-size:0;font-family:Microsoft YaHei;display:inline-block;}

  #ul li{

          -moz-user-select:none;/*火狐*/

          -webkit-user-select:none;/*webkit浏览器*/

          -ms-user-select:none;/*IE10*/

          -khtml-user-select:none;/*早期浏览器*/

          user-select:none;

          list-style: none;float:left;padding:6px;font-size:13px;border:1px solid #ccc;margin:2px;cursor:pointer;color:#585858;}

  

  #div{width:100%;text-align: center;position:absolute;bottom:30px;}

  #ul .background{background:#39C6F4;color:white;border:1px solid #39C6F4;}

javascript:

<script>

  var ul = document.getElementById('ul');

  var li = ul.getElementsByTagName('li');

  li[2].className = 'background';

  var num01 = 1;

  var num02;/*总页数*/

  

//1 //首页的点击事件

      li[li.length-li.length].onclick = function(){

          Background(2);

          num01 = 1;

          content(num01);

      }

//2 //尾页的点击事件

      li[li.length-1].onclick = function(){

          Background(li.length-3);

          num01 = num02-(li.length-5);

          content(num01);

      }

//3 //上一页的点击事件

      li[li.length-(li.length-1)].onclick = function(){

 

          for(var j = 0;j<li.length-4;j++){

              if(li[j+2].className == 'background' && li[j+2].innerHTML != 1){

                  if(j+2 != li.length-(li.length-2)){

                      Background(j+1);

                  }

                  break;

              }

          }

          if(j+2 == li.length-(li.length-2)){

              num01 -- ;

              content(num01);

          }

      }

//4 下一页的点击事件

      li[li.length-2].onclick = function(){

          for(var j = 0;j<li.length;j++){

              if(li[j].className == 'background' && li[j].innerHTML < num02){  //* && 写最后一页的总数*/

                  if(j+1 < li.length-2){

                      Background(j+1);

                  }

                  break;

              }

          }

          if(num01 < num02){

            num01++;

          }

          if(j+1 == li.length-2){

              content(num01);

          }

      }        

//分页的点击事件

      for(var i = 0;i<li.length-4;i++){

          li[i+2].index = i+2;

          li[i+2].onclick = function(){

              Background(this.index);

          }

      }

//把所有的分页背景去掉，给指定的分页添加背景颜色

      function Background(num){

          for(var i = 0;i<li.length;i++){

              li[i].className = li[i].className.replace('background','');

              li[num].className = 'background';

          }

      }

// 给li 写内容

  content(num01);

  function content(number){

      for(var i=0;i<li.length-4;i++){

          li[i+2].innerHTML = number;

          number++;

      }

  }        

</script>