datatable排序分页（请求）

datatable排序分页（请求）

@(关键字)[angular|datatable|排序|分页]

datatable 此文介绍的datatable是基于angular作为语言基础的。其主要包含：
- 搜索条件查询引起数据重加载
- 修改每页显示多少条数据引起数据重加载
- 点击数据表的某一个字段因排序引起数据重加载
- 点击分页（首页、上一页、下一页、尾页、自定义输入页码）引起数据重加载

---

Dom代码块

详细的dom结构，请参照fdc_smartplatform\app\tpl\model\datatable.tpl
注意
1. 所有的ng-model=dbparms.#的都是需要传递的参数，其对应于controller中$scope.dbparms 对应的对象，请特别注意 2. ng-click=search（parms） 是向后台查询数据的通用方法，其中parms均有特殊的定义，与$scope.search方法中switch一一对应
3. 表格字段的sort是排序的通用方法

固定的头部

<div id="model.datatable" ng-controller="ItemCtrl">

</div>

搜索条件部分

<form novalidate
                name="myForm">
          <div class="search-condition-box">
            <div class="condition-tips">
              <label for="name">用户名</label>
              <!--ng-class 当输入的不正确时，给input添加一个红色边框-->
              <input  name="name"
                      ng-model="dbparms.name"
                      ng-class="{error:myForm.name.$dirty && myForm.name.$invalid}" 
                      ng-maxlength="5"
                      ng-minlength="3"
                      ng-pattern="/\w/"
                      type="text"
                      required />
                      <!--出现错误提示信息-->
              <!-- <span item-form-validate
                      ng-messages="myForm.name.$error"
                      ng-messages-multiple
                      ng-show="myForm.name.$dirty && myForm.name.$invalid">
              </span> -->
            </div>
            <div class="condition-tips">
              <label for="user">user</label>
              <input  name="user"
                      ng-model="dbparms.user"
                      type="text"/>
            </div>
            <div class="condition-tips">
              <button ng-disabled="myForm.$invalid" class="btn btn-info" ng-click="search('query')">查询</button>
            </div>
          </div>
        </form>

table头部（修改翻页&操作按钮）

注意：class=”ar “的均为图标，如需使用可参照http://chinakids.github.io/Art-Reactor/dome/index.html

<div class="box-header table-header">
            <h3 class="box-title">
              <span class="ar ar-list-ulb"></span>这是我的表格
            </h3>
            <div class="pull-right">
              <div class="dataTables_length">
                <label>每页
                  <select class="form-control input-sm" 
                          ng-model="dbparms.pagesize" 
                          ng-options="(page+'条') for page in dbparms.pagelist" 
                          ng-change="search()">
                  </select>
                </label>
              </div>
              <div class="btn-group">
                <a href="#model/myItem" class="btn btn-default btn-sm" title="新增" >
                  <i class="ar ar-zoom-in"></i>
                </a>
                <a class="btn btn-default btn-sm" title="删除" >
                  <i class="ar ar-delete"></i>
                </a>
                <a class="btn btn-default btn-sm" title="修改">
                  <i class="ar ar-edit-now"></i>
                </a>
                <a class="btn btn-default btn-sm" title="导出Excel">
                  <i class="ar ar-download-b"></i>
                </a>
              </div><!-- /.btn-group -->
            </div><!-- /.pull-right -->
          </div><!-- /.box-header -->

table数据部分

注意：sort方法与ng-class(default不排序状态，desc向下箭头，asc向上箭头)

<div class="table-responsive mailbox-messages">
            <table class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
              <thead>
                <tr class="row">
                  <th class="checkAll"><input ng-click="checkAll()" type="checkbox">全选</th>

                  <th ng-click="sort('name')">NAME
                    <span ng-class="{'default': 'glyphicon glyphicon-sort', 'desc': 'ar ar-triangle-down','asc':'ar ar-triangle-up'}[name]"></span>
                  </th>
                  <th ng-click="sort('team')">TEAM
                    <span ng-class="{'default': 'glyphicon glyphicon-sort', 'desc': 'ar ar-triangle-down','asc':'ar ar-triangle-up'}[team]"></span>
                  </th >

                  <th ng-click="sort('retire')">RETIRE
                    <span ng-class="{'default': 'glyphicon glyphicon-sort', 'desc': 'ar ar-triangle-down','asc':'ar ar-triangle-up'}[retire]"></span>
                  </th>
                  <th>EDIT</th>
                </tr>
              </thead>
              <tbody>
                <tr class="row" ng-repeat="list in model.lists">
                  <td ><input name='checkname' class="inChecked" type="checkbox"></td>
                  <td >{{list.name}}</td>
                  <td >{{list.team}}</td>
                  <td >{{list.retire}}</td>
                  <td>
                    <a class="btn btn-primary btn-xs" href="#model/myItem" type="button"><i class="ar ar-zoom-in"></i></a>
                    <a class="btn btn-primary btn-xs" href="#model/myItemUpdate" type="button"><i class="ar ar-edit-now"></i></a>
                    <a class="btn btn-warning btn-xs" ng-click="model.delete($index)" type="button"><i class="ar ar-delete"></i></a>
                  </td>
                </tr>
              </tbody>
            </table><!-- /.table -->
          </div><!-- /.mail-box-messages -->

table翻页

注意：这里多处使用ng-disabled来做一些简单的逻辑判断，减少脚本中的逻辑判断，如需修改，请慎重。

<div class="row footer-paginate">
            <div class="col-sm-12">
              <div class="col-sm-8">
                <div class="dataTables_paginate paging_simple_numbers">
                  <ul class="pagination">
                    <li class="paginate_button first" >
                      <button ng-click="search('first')" ng-disabled="dbparms.curpage==1">首页</button>
                    </li>
                    <li class="paginate_button" >
                      <button ng-click="search('pre')" ng-disabled="dbparms.curpage==1">上一页</button>
                    </li>
                    <li class="paginate_button">
                      <button>第{{dbparms.curpage}}/{{dbparms.totalpages}}页</button>
                    </li>
                    <li class="paginate_button">
                      <button ng-click="search('next')" ng-disabled="dbparms.curpage==dbparms.totalpages">下一页</button>
                    </li>
                    <li class="paginate_button next">
                      <button ng-click="search('last')" ng-disabled="dbparms.curpage==dbparms.totalpages">尾页</button>
                    </li>
                    <li>
                      <input type="number" ng-model="dbparms.pages">
                      <button class="btn btn-info btn-flat" ng-disabled="dbparms.pages<1||dbparms.pages>dbparms.totalpages" ng-click="search('page')">Go</button>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="dataTables_info" role="status" aria-live="polite">共有<span>{{dbparms.totaldatas}}</span>条记录
                </div>
              </div>
            </div>
          </div>

js脚本

脚本中主要是一些方法，在实际中，请根据需要进行修改（注意，在修改$scope.dbparms时，需同步修改tpl中与之对应的字段），详细请查看fdc_smartplatform\app\js\model\datatable.js

固定的部分

(function (factory) {
  if (typeof define === 'function' && define.amd) {
    define([ 'angular','directives' ], factory);
  } else {
    factory(window.jQuery);
  }
})(function(angular){
  var init = function(wrap, params, tplPanel) {
    wrap.html(tplPanel());

    var itemApp = angular.module('itemApp',['fdcDirectives']);
    itemApp.controller('ItemCtrl', ['$scope', '$http', function($scope, $http){ }]);     
    angular.bootstrap(document.getElementById('model.datatable'), ['itemApp']);
  }
  return {
    init: init
  };
});

$scope.dbparms 参数

注意：主要是table相关的一些参数，此例中也是向后台请求数据的参数

$scope.dbparms={
          // 页面上的查询条件
          name:null,
          tel:null,
          startdate:null,
          enddate:null,
          number:[{
              key:"22",
              value:"22"
            },{
              key:"23",
              value:"23"
            },{
              key:"24",
              value:"24"
            }
          ],
          user:null,
          ordername:null,  //排序的字段
          ordertype:null,  //排序的方式 正序(asc) 还是倒序(desc)

          // table自身需要的一些条件
          curpage:1,      //当前是第多少页
          totalpages:12,  //总共多少页
          pages:null,     //输入即将查询的页码
          totaldatas:null,//总共多少条数据
          pagesize:10,     //每页显示多少条数据
          pagelist:[5,10,15,20,25]//预定义的页码数组 这个可以进行抽离
        }

$scope.model 基本操作

注意页面中对table数据的一些基本操作，开发中此部分需进行完善

$scope.model = {
          lists: null,
          create: function(){
            window.location.href = '#myItem?type=new';
          },
          update: function(id){
             window.location.href = '#myItem?type=edit&id=' + id;
          },
          delete: function(index){
            var msg = this.lists[index].name;
            msg = 'Sure to delete this record: ' + msg;  
            tool.confirm(msg, function(){
              $scope.model.lists.splice(index,1);
              $scope.$apply($scope.model);
            });
          }
        };

请求后台数据

注意：这个务必封装成一个方法，整个controller中可进行重复调用

 /**
         * 20151217 查询数据 詹顺怀
         * @param  {[obj]} parms [查询数据所需的参数]
         * @return {[type]}       [将新获取得数据重新渲染在页面上]
         */
        var getData=function(parms){
          console.log(parms);
          $http.get('tempdata/table.json',parms).success(function(res){
              $scope.model.lists = res.data;
              $scope.dbparms.totaldatas = res.totaldata;
              $scope.dbparms.totalpages = res.totalpages;
              $scope.dbparms.pages=null;
              // $scope.apply($scope.model.lists);
          });
        }

search 查询

/**
         * 20151217 查询&分页 詹顺怀
         *  按照条件查询(query) 
         *  分页（首页[first]、上一页[pre]、下一页[next]、尾页[last] Go(page)） 
         *  修改每页显示多少条数据 undefined
         * @param  {[type]} parms [当前点击的是那个按钮]
         * @return {[type]}       [更新请求参数，重新向后台请求数据]
         */
        $scope.search=function(parms){
          switch(parms){
            case 'query':
            case 'first':
              $scope.dbparms.curpage =1;
              break;
            case 'pre':
              $scope.dbparms.curpage -=1;
              break;
            case 'next':
              $scope.dbparms.curpage +=1;
              break;
            case 'last':
              $scope.dbparms.curpage =$scope.dbparms.totalpages;
              break;
            case 'page':
              $scope.dbparms.curpage =$scope.dbparms.pages;
              break;
            default:
              console.log($scope.dbparms.pagesize);
              break;
          }
          //重新传参 请求数据
          getData($scope.dbparms)
        }

sort 排序

        //20151217 table排序 詹顺怀
        //页面上那些字段需要排序
        var headtitles=['name','team','retire'];
        for(var i=0;i<headtitles.length;i++){
          $scope[headtitles[i]]='default';
        }
        // 默认以什么字段排序 例如以name 倒序
        // $scope.name='desc';
        $scope.sort=function(fieldName){
          for(var i =0;i<headtitles.length;i++){
            if(fieldName!=headtitles[i]){
              $scope[headtitles[i]]='default'
            }else{
              var s=$scope[fieldName];
              switch(s){
                case 'default':
                case 'asc':
                  $scope[fieldName]='desc';
                  break;
                case 'desc':
                  $scope[fieldName]='asc';
                  break;
                default:
                  break;
              }
            }
          }
          $scope.dbparms.ordername = fieldName;
          $scope.dbparms.ordertype = $scope[fieldName];
          //重新传参 请求数据
          getData($scope.dbparms);
        };