table с pagination на AngularJS
Ну кто-нибудь покажите РАБОТАЮЩИИ проект на AngularJS !!
Скажем надо просто таблица с "pagination" . Таблица показывает данные из REST URL service (JSON) REST URL service и она возвращает порцию!!! данных. Хотелось бы чтобы при клике на ">" paginator-e таблица показывала cледующую пришедшую порцию данных (JSON) и т.д. При клике на "<" paginator-e таблица показывает "предыдущие" данные (опять из REST URL service JSON-а ). При клике на ">>" (last) paginator-e таблица показывает "последние" данные (опять из REST URL service JSON-а ). Вычисления "порций" данных - на сервере, URL просто идет с параметрами типа "10 первых записей" |
Цитата:
Задача для Ангулар тривиальная: - при клике на "<>" запросить данные у сервера - при получении данных изменить модель Далее Ангулар все сделает сам. Цитата:
<form id='sys-find'>
<table id='sys-table'>
<thead>
<tr id='sys-table-find'>
<td ng-repeat='(i, tit) in define.title'>
<div ng-hide='!define.find[i].code' class='sys-field' ng-class='define.find[i].class'>
<div class='sys-field-input'>
<input name='sys-find' id='sys-find{{i}}' type='text' ng-disabled='!define.find[i].code' />
</div>
<div ng-click='openDct(define.find[i].dct,i)' data-val='{{define.find[i].dct}}' class='sys-field-type'></div>
</div>
</td>
</tr>
<tr>
<td colspan='{{define.title.length}}'>
<div id='sys-table-command' class='sys-table-command'>
<div class='sys-table-command-container'>
<button ng-click='find()' title='Выполнить поиск по "начинается"' class='sys-button' type='submit'>Начинается</button>
<button ng-click='find(1)' title='Выполнить поиск по "содержит"' ng-hide='define.contains==0' class='sys-button'>Содержит</button>
<button title='Очистить поисковые поля' class='sys-button' type='reset'>Очистить</button>
<button title='Перечитать данные таблицы' class='sys-button' type='reset'>Обновить</button>
<ul id='sys-table-access'>
<li id='sys-table-access-edit' title='Переход в режим редактирования карточки'><span>Редактировать</span></li>
<li id='sys-table-access-add' title='Добавить карточку'><span>Добавить</span></li>
<li id='sys-table-access-del' title='Удалить карточку'><span>Удалить</span></li>
</ul>
</div>
<div class='sys-table-command-container'>
<button ng-class='tableBeg|condition' ng-click='upPage()' title='Предыдущая страница' class='sys-button'>«</button>
<button ng-class='lineBeg|condition' ng-click='upLine()' title='Предыдущая строка' class='sys-button'><</button>
<button ng-class='lineEnd|condition' ng-click='downLine()' title='Следущая строка' class='sys-button'>></button>
<button ng-class='tableEnd|condition' ng-click='downPage()' title='Следущая страница' class='sys-button'>»</button>
</div>
</div>
</td>
</tr>
<tr class='sys-table-head'>
<td ng-repeat='(key, tit) in define.title'>{{tit.name}}</td>
</tr>
</thead>
<tbody class='sys-table-data'>
<tr ng-click='selectRow(i)' ng-repeat='(i, row) in data' ng-class='row|selected' data-urn='{{row.urn}}'>
<td ng-repeat='(j, field) in row.fields' ng-class='field.class'>{{(field.value=='')? ' ': field.value}}</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan='{{define.title.length}}'>
<div id='sys-table-command-end' class='sys-table-command'>
<div class='sys-table-command-container'>
<button ng-class='tableBeg|condition' ng-click='upPage()' title='Предыдущая страница' class='sys-button'>«</button>
<button ng-class='lineBeg|condition' ng-click='upLine()' title='Предыдущая строка' class='sys-button'><</button>
<button ng-class='lineEnd|condition' ng-click='downLine()' title='Следущая строка' class='sys-button'>></button>
<button ng-class='tableEnd|condition' ng-click='downPage()' title='Следущая страница' class='sys-button'>»</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</form>
|
Вот контроллер... Там есть то самое "листание". А вот как брать данные на сервере - уже вопрос к твоей СУБДшке. ;)
/* Контроллер */
var app = angular.module('app', []);
app.controller(
'ctrl',
[
'$scope',
'$interval',
'$http',
function($scope,$interval, $http) {
$http.get('json/begin.csp').success(function(data) {
for (key in data) {
$scope[key] = data[key];
};
});
$scope.base=$('#sys-base').val();
var url='json/side.csp?base='+$scope.base;
$http.get(url).success(function(data) {
for (key in data) {
$scope[key] = data[key];
};
var i=getIndex();
getDefine($scope.side.list[i].code);
});
getMessage();
getDate();
var in_date=$interval(getDate,1000);
var in_message=$interval(getMessage,3000);
$scope.selectDctRow=function(N){
/* Выбор строки справочника */
var i=getDctRow();
if (i==N) {
i=$scope.dct.rows[N].grp;
if (i=='') {
$('#'+$scope.field).val($scope.dct.rows[N].value);
$scope.closeDct();
} else {
var url='/soi/sys/json/dct.csp';
url+='?code='+$scope.dct.code;
url+='&group='+i;
$http.get(url).success(function(data) {
for (key in data) {
$scope[key] = data[key];
};
});
};
return;
};
if (i!=undefined) {
$scope.dct.rows[i].on=0;
};
$scope.dct.rows[N].on=1;
};
/* Номер текущей строки в таблице справочника */
function getDctRow(){
for(var i=0; i<$scope.dct.rows.length; i++){
if ($scope.dct.rows[i].on==1){
return i;
};
};
};
$scope.openDct=function(Code,N){
/* Вызов справочника */
if (Code=='') {
return;
};
$scope.field='sys-find'+N;
$('#sys-blackout').show();
$('#sys-dictionary').show();
var url='/soi/sys/json/dct.csp';
url+='?code='+Code;
$http.get(url).success(function(data) {
for (key in data) {
$scope[key] = data[key];
};
});
};
$scope.levelDct=function(){
/* Вернуться в справочнике на уровень вверх */
var url='/soi/sys/json/dct.csp';
url+='?code='+$scope.dct.code;
$http.get(url).success(function(data) {
for (key in data) {
$scope[key] = data[key];
};
});
};
$scope.closeDct=function(){
/* Закрыть справочник */
$scope.dct={};
$('#sys-dictionary').hide();
$('#sys-blackout').hide();
};
$scope.find=function(Type){
/* Выполнить поиск */
var url='json/find.csp';
var prm=$('#sys-find').serialize()
url+='?='+prm;
url+='&type='+Type;
url+='&base='+$scope.base;
var ind=getIndex();
ind=$scope.side.list[ind].code
url+='&index='+ind;
$http.post(url).success(function(data) {
for (key in data) {
$scope[key] = data[key];
};
$scope.data[0].on=1;
});
};
$scope.upPage=function(){
/* Перейти на предыдущую страницу */
if ($scope.tableBeg==1) {
return;
};
getData('page',-1);
};
$scope.downPage=function(){
/* Перейти на следущую страницу */
if ($scope.tableEnd==1) {
return;
};
getData('page');
};
$scope.upLine=function(){
/* Перейти на предыдущую строку */
if ($scope.lineBeg==1) {
return;
};
var i=getRow();
if (i==undefined) {
$scope.data[0].on=1;
if ($scope.tableBeg==1) {
$scope.lineBeg=1;
};
return;
};
if (i>0) {
$scope.data[i].on=0;
$scope.data[--i].on=1;
$scope.lineEnd=0;
if (($scope.tableBeg==1)&&(i==0)) {
$scope.lineBeg=1;
};
return;
};
getData('line',-1);
};
$scope.downLine=function(){
/* Перейти на следущую строку */
if ($scope.lineEnd==1) {
return;
};
var i=getRow();
if (i==undefined) {
$scope.data[$scope.data.length-1].on=1;
if (($scope.tableEnd==1)&&((i+1)==$scope.data.length)) {
$scope.lineEnd=1;
};
return;
};
if (i<($scope.data.length-1)) {
$scope.data[i].on=0;
$scope.data[++i].on=1;
$scope.lineBeg=0;
if (($scope.tableEnd==1)&&((i+1)==$scope.data.length)) {
$scope.lineEnd=1;
};
return;
};
getData('line');
};
$scope.headButton=function(N){
/* Нажали кнопку в верхнем меню */
if ($scope.headBtns[N].id=='sys-head-menu') {
top.location='/soi/sys/general/menu/page.csp?base='+$scope.base;
};
};
$scope.selectRow=function(N){
/* Смена текущей строки */
if ($scope.data[N].on==1){
return;
};
var i=getRow();
if (i!=undefined) {
$scope.data[i].on=0;
}
$scope.lineBeg=0;
$scope.lineEnd=0;
if ((N==0)&&($scope.tableBeg==1)) {
$scope.lineBeg=1;
}
if ((N==($scope.data.length-1))&&($scope.tableEnd==1)) {
$scope.lineEnd=1;
}
$scope.data[N].on=1;
getRelations($scope.data[N].urn);
};
$scope.selectIndex=function(N){
/* Смена индекса */
if ($scope.side.list[N].on==1){
return;
};
var i=getIndex();
if (i!=undefined) {
$scope.side.list[i].on=0;
};
$scope.side.list[N].on=1;
getDefine($scope.side.list[N].code);
};
/* Запросить данные по структуре индекса */
function getRelations(Urn){
var url='json/relations.csp';
url+='?base='+$scope.base;
url+='&urn='+Urn;
$http.post(url).success(function(data) {
for (key in data) {
$scope[key] = data[key];
};
});
};
/* Запросить данные по структуре индекса */
function getDefine(Code){
var url='json/define.csp';
url+='?base='+$scope.base;
url+='&index='+Code;
$http.post(url).success(function(data) {
for (key in data) {
$scope[key] = data[key];
};
datepicker();
getData();
});
};
/* Страницу с данными по индексу картотеки */
function getData(Type,Order){
Type=Type||'init';
Order=Order||1;
var url='json/data.csp';
url+='?base='+$scope.base;
var ind=getIndex();
ind=$scope.side.list[ind].code
url+='&index='+ind;
url+='&type='+Type;
url+='&order='+Order;
$http.post(url).success(function(data) {
for (key in data) {
$scope[key] = data[key];
};
if (Type=='line') {
var i=(Order==1)? $scope.data.length-1: 0;
$scope.data[i].on=1;
};
});
};
/* Номер текущей строки в таблице */
function getRow(){
for(var i=0; i<$scope.data.length; i++){
if ($scope.data[i].on==1){
return i;
};
};
};
/* Номер текущего индекса */
function getIndex(){
for(var i=0; i<$scope.side.list.length; i++){
if ($scope.side.list[i].on==1){
return i;
};
};
};
/* Запросить серверную дату и время */
function getDate(){
$http.get('/soi/sys/json/date.csp').success(function(data) {
for (key in data) {
$scope[key] = data[key];
};
});
};
/* Запросить список сообщений */
function getMessage(){
$http.get('/soi/sys/json/message.csp').success(function(data) {
for (key in data) {
$scope[key] = data[key];
};
});
};
}
]
);
/* Для выделения элементов списка/таблицы */
app.filter(
'selected',
function(){
return function(Obj){
return (Obj.on==1)? 'sys-on': '';
}
}
);
/* Состояние кнопок навигации по списку/таблице */
app.filter(
'condition',
function(){
return function(Value){
return (Value==1)? 'sys-off': '';
}
}
);
/* Тип пиктограммы в окне справочника */
app.filter(
'dictionary',
function(){
return function(Value){
Value=Value.charAt(0).toLowerCase();
return (Value=="d")? "sys-dct2": "sys-dct1";
}
}
);
|
| Часовой пояс GMT +3, время: 15:12. |