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);
        };