项目中用到angularjs的表格ng-table,功能相当强大,像搜索、排序、checkBox、分页、每页表格显示数目等都有。API,demo什么的也只能参考官网了。这里做个备忘,哪天肯定还会用到。
HTML:
js:
$scope.tableParams = new ngTableParams(
{
page: 1,// show first page
count: 10,// count per page
sorting: {name:'asc'}
},{
total: 0,// length of data
getData: function($defer,params) {
NameService.getData($defer,params,$scope.filter);
}
});
$scope.$watch("filter.$",function () {
$scope.tableParams.reload();
});
});
app.service("NameService",function($http,$filter){
function filterData(data,filter){
return $filter('filter')(data,filter);
}
function orderData(data,params){
return params.sorting() ? $filter('orderBy')(data,params.orderBy()) : filteredData;
}
function sliceData(data,params){
return data.slice((params.page() - 1) params.count(),params.page() params.count())
}
function transformData(data,filter,params){
return sliceData( orderData( filterData(data,filter),params ),params);
}
var service = {
cachedData:[],getData:function($defer,filter){
if(service.cachedData.length>0){
console.log("using cached data")
var filteredData = filterData(service.cachedData,filter);
var transformedData = sliceData(orderData(filteredData,params),params);
params.total(filteredData.length)
$defer.resolve(transformedData);
}
else{
console.log("fetching data")
$http.get("data.json").success(function(resp)
{
angular.copy(resp,service.cachedData)
params.total(resp.length)
var filteredData = $filter('filter')(resp,filter);
var transformedData = transformData(resp,params)
$defer.resolve(transformedData);
});
}
}
};
return service;
});
json数据:
以上就是本文的全部内容,希望对大家的学习有所帮助。
原文链接:https://www.f2er.com/js/49743.html