05.02.2015, 17:03
|
|
Новичок на форуме
|
|
Регистрация: 12.11.2014
Сообщений: 9
|
|
|
Проблемы совмещения Angular и Datatables
Всем привет!
Может кто-нибудь с такой проблемой сталкивался или сможет указать, что я неверно делаю.
Проблема такая:
Для отображения таблицы и работы с ней (paging, filter, order и т.п.) использую плагин Datatables ( http://www.datatables.net/)
.row(ng-controller="MyController")
.col-xs-12
table#example.table.table-striped(cellspacing='0', width='100%')
thead
tr
th #
th Дата
th Задача
th Тип задачи
th Статус
th Очередь
tfoot
tr
th #
th Дата
th Задача
th Тип задачи
th Статус
th Очередь
tbody
tr(ng-repeat="row in rowCollection")
td {{row.issue_id}}
td {{row.date_issue}}
td {{row.issue_text}}
td {{row.group_of_support}}
td {{row.issue_status}}
td {{row.issue_queue}}
script(type='text/javascript').
$(document).ready(function () {
$('#example').DataTable();
});
В контроллере пока что просто передаю небольшой набор данных:
|
Код:
|
$scope.rowCollection = [
{issue_id: 2545,
date_issue: new Date('2015-08-26'),
issue_text: 'Не работает кнопка',
group_of_support: '2',
issue_status: 'В процессе',
issue_queue: '0'
},
{issue_id: 6581,
date_issue: new Date('2015-08-27'),
issue_text: 'не работает сервер',
group_of_support: '3',
issue_status: 'Новая',
issue_queue:'2'},
{issue_id: 54885,
date_issue: new Date('2015-08-27'),
issue_text: 'Зависла программа',
group_of_support: '5',
issue_status: 'Отложена',
issue_queue: '4'}
] |
Отображается прекрасно, но если я начинаю в браузере вводить в поиск значение для этой таблицы, сортировать таблицу, то все падает...
вместо данных я лишь вижу свои переменные {{row.issue_id}} и .т.д.
Надеюсь на помощь!
|
|
06.02.2015, 09:32
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,210
|
|
|
Сообщение от uuushka
|
Отображается прекрасно, но если я начинаю в браузере вводить в поиск значение для этой таблицы, сортировать таблицу, то все падает...
вместо данных я лишь вижу свои переменные {{row.issue_id}} и .т.д.
|
Какими "средствами" происходит "изменение" данных? Angular их меняет или тот плагин? |
|
06.02.2015, 09:35
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,210
|
|
|
Сообщение от uuushka
|
|
В контроллере пока что просто передаю небольшой набор данных:
|
Т.е. сам angular данные модели не меняет... Т.ч. вот и ответ на твой вопрос.
Angular должен сам данные запрашивать у сервера. Тогда и вид будет меняться, соответственно данным модели. |
|
06.02.2015, 13:22
|
|
Новичок на форуме
|
|
Регистрация: 12.11.2014
Сообщений: 9
|
|
Сообщение от ksa
|
Т.е. сам angular данные модели не меняет... Т.ч. вот и ответ на твой вопрос.
Angular должен сам данные запрашивать у сервера. Тогда и вид будет меняться, соответственно данным модели.
|
Меняется средствами плагина, да. То есть плагин позволяет сортировать, например, по нажатию на имя столбца. но какие данные запрашивать у сервера, если меняется таблица на клиенте с помощью этого плагина от jQuery? |
|
06.02.2015, 13:29
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,210
|
|
|
Сообщение от uuushka
|
|
но какие данные запрашивать у сервера, если меняется таблица на клиенте с помощью этого плагина от jQuery?
|
Напомню основное правило angular - именно он отвечает как за модель, так и за ее отображение на странице!
Если какая-то другая "сила" начнет менять внешнее представление - будет некая фигня. В твоем случае вот такая.
|
Сообщение от uuushka
|
|
вместо данных я лишь вижу свои переменные {{row.issue_id}} и .т.д.
|
|
|
06.02.2015, 13:33
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,210
|
|
|
Сообщение от uuushka
|
|
плагин позволяет сортировать, например, по нажатию на имя столбца
|
Это теперь должен делать angular. Там, к стати, есть и сортировка... 
Вот пример из "обучения" как это нужно делать
http://angular.ru/tutorial/step_04 |
|
06.02.2015, 13:38
|
|
Новичок на форуме
|
|
Регистрация: 12.11.2014
Сообщений: 9
|
|
большое спасибо! стало куда понятнее =) |
|
06.02.2015, 14:00
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,210
|
|
uuushka, вот как это должно работать в angular
<!DOCTYPE html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
#order_info > span {
font-weight: bold;
}
.order-name {
color: blue;
cursor: pointer;
}
.order-name:hover {
color: red;
}
</style>
<script type='text/javascript'>
function MyController($scope){
$scope.orderField='issue_id';
$scope.newOrder=function(Name){
$scope.orderField=Name;
};
$scope.rowCollection = [
{
issue_id: 2545,
date_issue: new Date('2015-08-26'),
issue_text: 'Не работает кнопка',
group_of_support: '2',
issue_status: 'В процессе',
issue_queue: '0'
},
{
issue_id: 6581,
date_issue: new Date('2015-08-27'),
issue_text: 'не работает сервер',
group_of_support: '3',
issue_status: 'Новая',
issue_queue:'2'
},
{
issue_id: 54885,
date_issue: new Date('2015-08-27'),
issue_text: 'Зависла программа',
group_of_support: '5',
issue_status: 'Отложена',
issue_queue: '4'
}
]
};
</script>
</head>
<body ng-controller="MyController">
<p id='order_info'>Сейчас сортировка по полю <span>{{orderField}}</span></p>
<table>
<thead>
<tr>
<th ng-click='newOrder("issue_id")' class='order-name'>#</th>
<th ng-click='newOrder("date_issue")' class='order-name'>Дата</th>
<th>Задача</th>
<th>Тип задачи</th>
<th>Статус</th>
<th>Очередь</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection| orderBy: orderField">
<td>{{row.issue_id}}</td>
<td>{{row.date_issue}}<td>
<td>{{row.issue_text}}<td>
<td>{{row.group_of_support}}<td>
<td>{{row.issue_status}}<td>
<td>{{row.issue_queue}}<td>
</tr>
</tbody>
</table>
</body>
</html>
Последний раз редактировалось ksa, 06.02.2015 в 14:04.
|
|
06.02.2015, 14:07
|
|
Новичок на форуме
|
|
Регистрация: 12.11.2014
Сообщений: 9
|
|
|
спасибоу))
|
|
06.02.2015, 14:32
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,210
|
|
uuushka, меня поперло! 
<!DOCTYPE html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
#order_info > span {
font-weight: bold;
}
.order-name {
color: blue;
cursor: pointer;
}
.order-name:hover {
color: red;
}
</style>
<script type='text/javascript'>
function MyController($scope){
$scope.orderField='issue_queue';
$scope.newOrder=function(Name){
$scope.orderField=Name;
};
$scope.rowCollection = [
{
issue_id: 2545,
date_issue: new Date('2015-08-26'),
issue_text: 'Не работает кнопка',
group_of_support: '2',
issue_status: 'В процессе',
issue_queue: '0'
},
{
issue_id: 6581,
date_issue: new Date('2015-08-27'),
issue_text: 'не работает сервер',
group_of_support: '3',
issue_status: 'Новая',
issue_queue:'2'
},
{
issue_id: 54885,
date_issue: new Date('2015-08-27'),
issue_text: 'Зависла программа',
group_of_support: '5',
issue_status: 'Отложена',
issue_queue: '4'
}
]
$scope.status=[
'Новая',
'В процессе',
'Отложена',
'Завершена'
];
};
</script>
</head>
<body ng-controller="MyController">
<p id='order_info'>Сейчас сортировка по полю <span>{{orderField}}</span></p>
<table border='1'>
<thead>
<tr>
<th ng-click='newOrder("issue_id")' class='order-name'>#</th>
<th ng-click='newOrder("date_issue")' class='order-name'>Дата</th>
<th>Задача</th>
<th>Тип задачи</th>
<th ng-click='newOrder("issue_status")' class='order-name'>Статус</th>
<th ng-click='newOrder("issue_queue")' class='order-name'>Очередь</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection| orderBy: orderField">
<td>{{row.issue_id}}</td>
<td>{{row.date_issue}}</td>
<td>{{row.issue_text}}</td>
<td>{{row.group_of_support}}</td>
<td>
<select ng-model="row.issue_status">
<option ng-repeat='i in status' >{{i}}</option>
</select>
</td>
<td><input ng-model='row.issue_queue' value={{row.issue_queue}} /></td>
</tr>
</tbody>
</table>
</body>
</html>
Начальство приказало изучать angular... Т.ч. нужно тренироваться!
|
|
|
|
