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);
};
扫一扫
3106
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
