ngTbale真分页实现排序搜索等功能

Posted 2020-06-21 小骚木

一. 真分页表格基础

　　1. 需求：分页，排序，搜索都是需要发API到服务端。

　　2. JS实现代码：

　　　　getStorage是localStorage一个工具方法，可以自己写这个方法。

　　　　API参数如下：

　　　　{

　　　　　　limit: initItemCountPerPage,

　　　　　　index: options1.page,

　　　　　　sortKey: options1.sortKey ? encodeURIComponent(options1.sortKey) : ‘‘,

　　　　　　sortType: options1.sortType ? options1.sortType: ‘‘,

　　　　　　searchWord: ‘‘

　　　　}

angular.module(‘newApp‘)
  .factory(‘ListTableSV‘, [‘$timeout‘, ‘ngTableParams‘, ‘getStorage‘, function ($timeout, ngTableParams, getStorage) {
    var store = getStorage(‘localStorage‘);

    /**
     * 创建表格
     * @param options1
     * @param options2
     * @returns {ngTableParams|*}
     */
    function createListTable(options1, options2) {
      var listTable = new ngTableParams(options1, {
        counts: options2.counts,
        getData: function ($defer, params) {
          if (!listTable.isNotFisrtLoadData) {
            listTable.apiParams = initApiParams(options1);
          }
          listTable.isNotFisrtLoadData = true;
          options2.getData(listTable.apiParams).then(function (data) {
            listTable.resetCheckboxes();
            var resData = data.data.data;
            var onDataResult = options2.onDataResult;
            if (onDataResult) {
              onDataResult(resData);
            }
            var items = resData.items;
            var dataPreprocessFunc = options2.dataPreprocessFunc;
            if (dataPreprocessFunc) {
              dataPreprocessFunc(items);
            }
            var totalCount = resData.totalCount ? resData.totalCount : 0;
            params.items = (items && totalCount) ? items : [];
            listTable.calculatePages(totalCount);
            params.total(totalCount);
            $defer.resolve(params.items);
            return;
          }, function () {
            params.items = [];
            var totalCount = 0;
            listTable.calculatePages(totalCount);
            params.total(totalCount);
            $defer.resolve(params.items);
            return;
          });
        }
      });
      listTable.tableName = options1.tableName;
      listTable.titles = options1.titles;
      listTable.getItemId = options2.getItemId;
      listTable.toFirstPageAndReload = function () {
        if (listTable.page() == 1) {
          listTable.reload();
        } else {
          listTable.toPage(1);
        }
      };
      return listTable;
    };

    function initApiParams(options1) {
      var STORAGE_PAGESIZE_KEY = getKeyForStoragePageSize(options1);
      if (store.get(STORAGE_PAGESIZE_KEY)) {
        var initItemCountPerPage = store.get(STORAGE_PAGESIZE_KEY)[‘value‘];
      } else {
        var initItemCountPerPage = options1.count;
      }
      return {
        limit: initItemCountPerPage,
        index: options1.page,
        sortKey: options1.sortKey ? encodeURIComponent(options1.sortKey) : ‘‘,
        sortType: options1.sortType ? options1.sortType: ‘‘,
        searchWord: ‘‘
      };
    }

    /**
     * 初始化排序功能
     * @param listTable
     */
    function initSort(listTable, options1) {
      listTable.sortClickIndex = 0;
      listTable.sortClickDelayIndex = 0;
      listTable.sortDelay = 750;
      listTable.nextSortType = function () {
        return listTable.sortParams.type == ‘asc‘ ? ‘desc‘ : ‘asc‘;
      };
      listTable.isColumnSorting = function (key) {
        return listTable.sortParams.key == key;
      };
      listTable.isColumnSortingByASC = function (key) {
        return listTable.isColumnSorting(key) && listTable.sortParams.type == ‘asc‘;
      };
      listTable.isColumnSortingByDESC = function (key) {
        return listTable.isColumnSorting(key) && listTable.sortParams.type == ‘desc‘;
      };
      listTable.resetSortParams = function () {
        listTable.sortParams = {
          key: options1.sortKey ? options1.sortKey : ‘‘,
          type: options1.sortType ? options1.sortType : ‘‘
        };
      };
      listTable.toSorting = function (key, type) {
        listTable.sortClickIndex ++;
        listTable.sortParams.key = key;
        listTable.sortParams.type = type;
        $timeout(function() {
          listTable.sortClickDelayIndex ++;
          if (listTable.sortClickIndex === listTable.sortClickDelayIndex) {
            listTable.sortClickIndex = 0;
            listTable.sortClickDelayIndex = 0;
            listTable.apiParams.sortKey = encodeURIComponent(key);
            listTable.apiParams.sortType = type;
            listTable.toFirstPageAndReload();
          }
        }, listTable.sortDelay);
      }
      listTable.resetSortParams();
    };

    /**
     * 初始化条目选择框
     * @param listTable
     * @param withCheckboxes
     * @returns {*}
     */
    function initCheckboxes(listTable, withCheckboxes) {
      if (withCheckboxes) {
        listTable.toggleCheckAll = function () {
          var checkedCount = listTable.checkedIds().length;
          if (checkedCount == listTable.items.length) {
            listTable.deselectAll();
          } else {
            listTable.selectAll();
          }
        };
        listTable.selectAll = function () {
          listTable.resetCheckboxes();
          listTable.checkboxes.selectAll = true;
          for (var index in listTable.items) {
            listTable.checkboxes.items[listTable.getItemId(listTable.items[index])] = true;
          }
        };
        listTable.deselectAll = function () {
          listTable.resetCheckboxes();
          listTable.checkboxes.selectAll = false;
          for (var index in listTable.items) {
            listTable.checkboxes.items[listTable.getItemId(listTable.items[index])] = false;
          }
        };
        listTable.checkedIds = function () {
          var ids = [];
          for (var index in listTable.items) {
            var id = listTable.getItemId(listTable.items[index]);
            if (listTable.checkboxes.items[id]) {
              ids.push(id);
            }
          }
          listTable.checkboxes.selectAll = listTable.items ? (listTable.items.length == ids.length) : false;
          return ids;
        }
        listTable.resetCheckboxes = function () {
          listTable.checkboxes = {
            selectAll: false,
            items: {}
          };
        };
      } else {
        listTable.resetCheckboxes = function () {
        }
      }
      listTable.resetCheckboxes();
      return listTable;
    };

    /**
     * 初始话分页功能
     * @param listTable 表格
     * @private
     */
    function initPagination(listTable, options1) {
      var STORAGE_PAGESIZE_KEY = getKeyForStoragePageSize(options1);
      if (store.get(STORAGE_PAGESIZE_KEY)) {
        listTable.count(store.get(STORAGE_PAGESIZE_KEY)[‘value‘]);
      }
      if (options1.page) {
        listTable.page(options1.page);
      }
      listTable.editCount = listTable.count();

      listTable.toCount = function (count) {
        var currentCount = listTable.count();
        if (currentCount != count) {
          listTable.count(count);
          listTable.apiParams.index = 1;
          listTable.apiParams.limit = count;
        }
      };
      listTable.prePage = function () {
        var page = listTable.page();
        if (page > 1) {
          listTable.page(page - 1);
          listTable.apiParams.index = page - 1;
        }
      };
      listTable.nextPage = function () {
        var page = listTable.page();
        if (page < Math.ceil(1.0 * listTable.total() / listTable.count())) {
          listTable.page(page + 1);
          listTable.apiParams.index = page + 1;
        }
      };
      listTable.toPage = function (page) {
        var currentPage = listTable.page();
        if (currentPage != page) {
          listTable.page(page);
          listTable.apiParams.index = page;
        }
      };
      listTable.calculatePages = function (totalCount) {
        var itemCountPerPage = listTable.count();
        store.set(STORAGE_PAGESIZE_KEY, {
          ‘value‘: itemCountPerPage
        });
        var totalPage = Math.ceil(1.0 * totalCount / itemCountPerPage);
        var currentPage = Math.max(1, Math.min(listTable.page(), totalPage));
        listTable.pages = calculateTablePages(currentPage, totalPage);
      }
    };

    function getKeyForStoragePageSize(options1) {
      return ‘[email protected]‘ + options1.tableName;
    };

    function calculateTablePages(currentPage, totalPage) {
      if (totalPage == 0) {
        return [];
      }
      var end = Math.min(9, totalPage);
      var pages = [currentPage];
      while (pages.length < end) {
        var pre = pages[0] - 1;
        var next = pages[pages.length - 1] + 1;
        if (pre >= 1) {
          pages.unshift(pre);
        }
        if (next <= totalPage) {
          pages.push(next);
        }
      }
      return pages;
    };

    function init(options1, options2) {
      var listTable = createListTable(options1, options2);
      initSort(listTable, options1);
      initCheckboxes(listTable, options1.withCheckboxes);
      initPagination(listTable, options1);
      return listTable;
    };

    return {
      init: init,
    };
  }]);

　　2. html分页代码

<div class="ng-cloak dahuo-pagination" ng-if="params.pages.length > 0">
  <div class="col-lg-6">
    <div class="dataTables_info" role="status" aria-live="polite" ng-if="params.pages.length > 0">
      {{ params.count() * (params.page() - 1) + 1 }}~
      {{ params.count() * (params.page() - 1) + params.data.length }}条，共{{
      params.total() }}条记录
    </div>
  </div>
  <div class="col-lg-6 pagination2" style="margin-bottom: 40px">
    <div class="dataTables_paginate paging_simple_numbers">
      <ul class="pagination ng-table-pagination">
        <li><a href="" ng-click="params.prePage()">上一页</a></li>
        <li ng-repeat="page in params.pages" ng-class="{‘active‘ : page == params.page()}">
          <a href="" ng-click="params.toPage(page)">{{ page }}</a>
        </li>
        <li><a href="" ng-click="params.nextPage()">下一页</a></li>
      </ul>
    </div>
    <div class="col-lg-3 pull-right">
      <select class="select form-control" ng-model="params.editCount" ng-change="params.toCount(params.editCount)" style="padding: 6px; margin-top: 2px;min-width: 80px;margin-right: 10px" ng-options="size for size in params.settings().counts">
      </select>
    </div>
  </div>
</div>

　　3. 说明：

　　　　基本实现了分页，搜索，排序（仅仅支持单个排序）等功能。搜索和排序会返回第一页。

 

二. 使用方法

　　服务端应该返回结果{data:{data: {items: [{name1: ...}, {...}]}}};

　　1. html中Table部分的代码

　　　　没有什么其他说的，这么写就行了。

<div class="table-responsive">
  <table ng-table="productsTable" class="table trans-table table-hover text-left dahuo-table" template-pagination="layouts/pagination_v3.html" width="100%">
    <thead>
    <tr>
      <th width="5%" class="dahuo-table-header-th text-center" header="‘ng-table/headers/checkbox.html‘">
      <span class="list-checkbox">
        <input type="checkbox" ng-model="productsTable.checkboxes.selectAll" ng-disabled="productsTable.items.length < 1" ng-click="productsTable.toggleCheckAll()"/>
        <span></span>
      </span>
      </th>
      <th width="15%" ng-repeat="title in productsTable.titles" ng-class="{‘sort‘: title.sortable}"
          ng-click="productsTable.toSorting(title.key, productsTable.nextSortType())">
        {{ title.name }}
        <li class="fa pull-right" ng-if="title.sortable" ng-class="{‘fa-sort-asc‘: productsTable.isColumnSortingByASC(title.key), ‘fa-sort-desc‘: productsTable.isColumnSortingByDESC(title.key), ‘fa-unsorted‘: !productsTable.isColumnSorting(title.key)}" aria-hidden="true" ng-style="{‘color‘ : (!productsTable.isColumnSorting(title.key) ? ‘#c9c9c9‘ : ‘‘)}"></li>
      </th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in $data">
      <td width="5%" header="‘ng-table/headers/checkbox.html‘"
          class="str-checkbox, dahuo-table-body-th text-center">
      <span class="list-checkbox">
        <input type="checkbox"  ng-model="productsTable.checkboxes.items[item.id]" disabled/>
        <span></span>
      </span>
      </td>
      <td>{{item.name1}}</td>
      <td>{{item.name2}}</a></td>
      <td>{{item.name3}}</td>
      <td>{{item.name4}}</td>
      <td>{{item.name5}}</td>
    </tr>
    <tr style="height: 100px" ng-if="$data.length < 1">
      <td colspan="6" class="text-center">暂时没有数据</td>
    </tr>
    </tbody>
  </table>
</div>

　　2. Controller调用

　　　　DS是发送API的一个服务。这里可以改成自己要发的API，改的时候注意使用$q服务返回值。

$scope.productsTable = new ListTableSV.init(
  {
    tableName:‘fund.update.list.products‘,
    titles:[
      {key: ‘name1‘, name: "名字1", sortable: true},
      {key: ‘name2‘, name: "名字2", sortable: true},
      {key: ‘name3‘, name: "名字3", sortable: true},
      {key: ‘name4‘, name: "名字4", sortable: true},
      {key: ‘name5‘, name: "名字5", sortable: true},
    ],
    withCheckboxes: true,
    page: 1,
    count: 25,
    sortKey: ‘name1‘,
    sortType: ‘desc‘
  },
  {
    counts: [10, 25, 50, 100],
    getData: function(apiParams) {
      return DS.simplelist(apiParams);
    },
    getItemId: function(item) {
      return item.id;
    }
  }
);

　　

三. 搜索的调用方法

　　很好调用，就两行代码，先更改API，在reload。

$scope.productsTable.apiParams.searchWord = encodeURIComponent($scope.keyword);
$scope.productsTable.toFirstPageAndReload();