http://datatables.net/tn/3: Невозможно повторно инициализировать данные
0
Я хочу выполнить группировку строк для своих данных, полученных с помощью ajax, в моих данных. Это мой код для html: -
<html>
<head>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.0-beta.2/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="NewFile.css">
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.0-beta.2/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('#example').dataTable( {
"ajax": 'arrays.txt'
} );
} );
</script>
<script>
</script>
<script>
$(document).ready(function() {
var table = $('#example').DataTable({
"columnDefs": [
{ "visible": false, "targets": 2 }
],
"order": [[ 2, 'asc' ]],
"displayLength": 25,
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(2, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="5">'+group+'</td></tr>'
);
last = group;
}
} );
}
} );
// Order by the grouping
$('#example tbody').on( 'click', 'tr.group', function () {
var currentOrder = table.order()[0];
if ( currentOrder[0] === 2 && currentOrder[1] === 'asc' ) {
table.order( [ 2, 'desc' ] ).draw();
}
else {
table.order( [ 2, 'asc' ] ).draw();
}
} );
} );
</script>
</body>
</html>
И это мой файл ajax arrays.txt: -
{
"data": [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
],
[
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
"2011/07/25",
"$170,750"
],
[
"Ashton Cox",
"Junior Technical Author",
"San Francisco",
"1562",
"2009/01/12",
"$86,000"
],
[
"Cedric Kelly",
"Senior Javascript Developer",
"Edinburgh",
"6224",
"2012/03/29",
"$433,060"
],
[
"Airi Satou",
"Accountant",
"Tokyo",
"5407",
"2008/11/28",
"$162,700"
],
[
"Brielle Williamson",
"Integration Specialist",
"New York",
"4804",
"2012/12/02",
"$372,000"
],
[
"Herrod Chandler",
"Sales Assistant",
"San Francisco",
"9608",
"2012/08/06",
"$137,500"
],
[
"Rhona Davidson",
"Integration Specialist",
"Tokyo",
"6200",
"2010/10/14",
"$327,900"
],
[
"Colleen Hurst",
"Javascript Developer",
"San Francisco",
"2360",
"2009/09/15",
"$205,500"
],
[
"Sonya Frost",
"Software Engineer",
"Edinburgh",
"1667",
"2008/12/13",
"$103,600"
],
[
"Jena Gaines",
"Office Manager",
"London",
"3814",
"2008/12/19",
"$90,560"
],
[
"Quinn Flynn",
"Support Lead",
"Edinburgh",
"9497",
"2013/03/03",
"$342,000"
],
[
"Charde Marshall",
"Regional Director",
"San Francisco",
"6741",
"2008/10/16",
"$470,600"
],
[
"Haley Kennedy",
"Senior Marketing Designer",
"London",
"3597",
"2012/12/18",
"$313,500"
],
[
"Tatyana Fitzpatrick",
"Regional Director",
"London",
"1965",
"2010/03/17",
"$385,750"
],
[
"Michael Silva",
"Marketing Designer",
"London",
"1581",
"2012/11/27",
"$198,500"
],
[
"Paul Byrd",
"Chief Financial Officer (CFO)",
"New York",
"3059",
"2010/06/09",
"$725,000"
],
[
"Gloria Little",
"Systems Administrator",
"New York",
"1721",
"2009/04/10",
"$237,500"
],
[
"Bradley Greer",
"Software Engineer",
"London",
"2558",
"2012/10/13",
"$132,000"
],
[
"Dai Rios",
"Personnel Lead",
"Edinburgh",
"2290",
"2012/09/26",
"$217,500"
],
[
"Jenette Caldwell",
"Development Lead",
"New York",
"1937",
"2011/09/03",
"$345,000"
],
[
"Yuri Berry",
"Chief Marketing Officer (CMO)",
"New York",
"6154",
"2009/06/25",
"$675,000"
],
[
"Caesar Vance",
"Pre-Sales Support",
"New York",
"8330",
"2011/12/12",
"$106,450"
],
[
"Doris Wilder",
"Sales Assistant",
"Sidney",
"3023",
"2010/09/20",
"$85,600"
],
[
"Angelica Ramos",
"Chief Executive Officer (CEO)",
"London",
"5797",
"2009/10/09",
"$1,200,000"
],
[
"Gavin Joyce",
"Developer",
"Edinburgh",
"8822",
"2010/12/22",
"$92,575"
],
[
"Jennifer Chang",
"Regional Director",
"Singapore",
"9239",
"2010/11/14",
"$357,650"
],
[
"Brenden Wagner",
"Software Engineer",
"San Francisco",
"1314",
"2011/06/07",
"$206,850"
],
[
"Fiona Green",
"Chief Operating Officer (COO)",
"San Francisco",
"2947",
"2010/03/11",
"$850,000"
],
[
"Shou Itou",
"Regional Marketing",
"Tokyo",
"8899",
"2011/08/14",
"$163,000"
],
[
"Michelle House",
"Integration Specialist",
"Sidney",
"2769",
"2011/06/02",
"$95,400"
],
[
"Suki Burks",
"Developer",
"London",
"6832",
"2009/10/22",
"$114,500"
],
[
"Prescott Bartlett",
"Technical Author",
"London",
"3606",
"2011/05/07",
"$145,000"
],
[
"Gavin Cortez",
"Team Leader",
"San Francisco",
"2860",
"2008/10/26",
"$235,500"
],
[
"Martena Mccray",
"Post-Sales support",
"Edinburgh",
"8240",
"2011/03/09",
"$324,050"
],
[
"Unity Butler",
"Marketing Designer",
"San Francisco",
"5384",
"2009/12/09",
"$85,675"
],
[
"Howard Hatfield",
"Office Manager",
"San Francisco",
"7031",
"2008/12/16",
"$164,500"
],
[
"Hope Fuentes",
"Secretary",
"San Francisco",
"6318",
"2010/02/12",
"$109,850"
],
[
"Vivian Harrell",
"Financial Controller",
"San Francisco",
"9422",
"2009/02/14",
"$452,500"
],
[
"Timothy Mooney",
"Office Manager",
"London",
"7580",
"2008/12/11",
"$136,200"
],
[
"Jackson Bradshaw",
"Director",
"New York",
"1042",
"2008/09/26",
"$645,750"
],
[
"Olivia Liang",
"Support Engineer",
"Singapore",
"2120",
"2011/02/03",
"$234,500"
],
[
"Bruno Nash",
"Software Engineer",
"London",
"6222",
"2011/05/03",
"$163,500"
],
[
"Sakura Yamamoto",
"Support Engineer",
"Tokyo",
"9383",
"2009/08/19",
"$139,575"
],
[
"Thor Walton",
"Developer",
"New York",
"8327",
"2013/08/11",
"$98,540"
],
[
"Finn Camacho",
"Support Engineer",
"San Francisco",
"2927",
"2009/07/07",
"$87,500"
],
[
"Serge Baldwin",
"Data Coordinator",
"Singapore",
"8352",
"2012/04/09",
"$138,575"
],
[
"Zenaida Frank",
"Software Engineer",
"New York",
"7439",
"2010/01/04",
"$125,250"
],
[
"Zorita Serrano",
"Software Engineer",
"San Francisco",
"4389",
"2012/06/01",
"$115,000"
],
[
"Jennifer Acosta",
"Junior Javascript Developer",
"Edinburgh",
"3431",
"2013/02/01",
"$75,650"
],
[
"Cara Stevens",
"Sales Assistant",
"New York",
"3990",
"2011/12/06",
"$145,600"
],
[
"Hermione Butler",
"Regional Director",
"London",
"1016",
"2011/03/21",
"$356,250"
],
[
"Lael Greer",
"Systems Administrator",
"London",
"6733",
"2009/02/27",
"$103,500"
],
[
"Jonas Alexander",
"Developer",
"San Francisco",
"8196",
"2010/07/14",
"$86,500"
],
[
"Shad Decker",
"Regional Director",
"Edinburgh",
"6373",
"2008/11/13",
"$183,000"
],
[
"Michael Bruce",
"Javascript Developer",
"Singapore",
"5384",
"2011/06/27",
"$183,000"
],
[
"Donna Snider",
"Customer Support",
"New York",
"4226",
"2011/01/25",
"$112,000"
]
]
}
Когда я пытаюсь запустить, я получаю сообщение об ошибке DataTables: table id = example - не может повторно инициализировать datatable. Для получения дополнительной информации об этой ошибке см. Http://datatables.net/tn/3 Итак, где ошибка?
*******************************************ОБНОВИТЬ****** **********************************
Теперь, если я создаю 2 javascript-код, я не получаю ошибку, datatable заселяется, но группировка строк не происходит. Итак, где же моя ошибка? ПОЖАЛУЙСТА ПОМОГИ !!!! Мой код: -
<html>
<head>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.0-beta.2/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="NewFile.css">
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>SECTION</th>
<th>REPORT NAME</th>
<th>CONTACT PERSON</th>
<th>LINK TO DOWNLOAD</th>
<th>METRICS</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.0-beta.2/js/jquery.dataTables.js"></script>
<!-- <script>
$(document).ready(function() {
$('#example').dataTable( {
"ajax": 'arrays.txt'
} );
<!-- } );
</script>
<script>
</script> -->
<script>
$(document).ready(function() {
$('#example').dataTable( {
"ajax": 'arrays.txt'
} );
table.destroy();
var table = $('#example').DataTable({
"columnDefs": [
{ "visible": false, "targets": 2 }
],
"order": [[ 2, 'asc' ]],
"displayLength": 25,
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(2, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="5">'+group+'</td></tr>'
);
last = group;
}
} );
}
} );
// Order by the grouping
$('#example tbody').on( 'click', 'tr.group', function () {
var currentOrder = table.order()[0];
if ( currentOrder[0] === 2 && currentOrder[1] === 'asc' ) {
table.order( [ 2, 'desc' ] ).draw();
}
else {
table.order( [ 2, 'asc' ] ).draw();
}
} );
} );
</script>
</body>
</html>
1 ответ
0
Это сообщение tn/3 связано с тем, что вы пытались дважды инициализировать одну и ту же таблицу. Попробуйте сделать dataload в той же функции, что и остальные. Что-то вроде этого:
$(document).ready(function() {
table = $('#example').DataTable({
"ajax": "arrays.txt",
"columnDefs": [
{ "visible": false, "targets": 2 }
],
"order": [[ 2, 'asc' ]],
"displayLength": 25,
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(2, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="5">'+group+'</td></tr>'
);
last = group;
}
} );
}
} );
// Order by the grouping
$('#example tbody').on( 'click', 'tr.group', function () {
var currentOrder = table.order()[0];
if ( currentOrder[0] === 2 && currentOrder[1] === 'asc' ) {
table.order( [ 2, 'desc' ] ).draw();
}
else {
table.order( [ 2, 'asc' ] ).draw();
}
} );
} );
solar411
Поделиться
Ещё вопросы
- 1Проблема оптимизации колонии муравьев
- 1Группа захвата Regex не распознает группу (1), несмотря на совпадения () true
- 0Поймать неосуществленные чистые виртуалы в C ++
- 0Отображается ли id элемента управления aspx всегда одинаковым в исходном HTML-коде?
- 0Ошибка «Анализ: неизвестное имя типа» после обновления XCode
- 0перенаправить GET-данные на другой сайт с помощью PHP
- 0Адаптивная галерея с изображениями и YouTube встраивает соотношение сторон
- 1Android двухстороннее связывание данных с onclick () не работает
- 0Использование InstallShield Limited Edition с VS2010
- 0JQuery добавление входного Val вместе
- 0угловой ремешок в сторону не убивает наблюдателя при закрытии
- 1Как я могу отправить данные в определенный сокет?
- 1Переучите глубокое обучение, добавив еще несколько изображений в набор данных
- 0Как добавить цвет для заполнителя angucomplete-alt
- 0Функция C ++, возвращающая строку с запятой
- 0c ++ stringstream объединяет строковые переменные с целыми числами и литеральными строками
- 0Enum не был объявлен
- 0Обрезать имя файла после расширения, используя PHP
- 1Попытка перенести старый алгоритм шифрования на C #
- 0Rails 4 + AngularJS: функции конфигурации и запуска App.js не работают
- 0Как скрыть URL при печати страницы с помощью JavaScript или JQuery
- 1Каков наилучший способ построить набор объектов динамической длины в Java?
- 1Ошибка после установки адаптера allure pytest
- 1метрика f1_score в лайтбм
- 0$ index перезапустить каждую строку в ng-repeat
- 0C ++ store количество раз, когда main называется [closed]
- 0AngularJS атрибут размещения материала внутри директив
- 1О Java ServerSocket Accept: занято?
- 1Как создать новый приемочный тест с родительским регрессионным тестом, используя VersionOne .Net SDK
- 1Как добавить поле на «plotLines text» Highcharts
- 1Паспорт Локальная стратегия не называется
- 1Суммирование массива чисел в javascript
- 1Почему я вижу красный крест над index.jsp?
- 1Как исправить Список <>, который становится нулевым внутри OnCreateView ()
- 0Исходное изображение jquery onclick из массива php
- 0Работает на локальном хосте, но не на веб-сервере… session_start (): невозможно отправить ограничитель кэша сеанса - заголовки уже отправлены
- 1Корреляция между уровнем и перекрытием в сообществе
- 1Google Charts Пользовательский шрифт отображается неправильно - Firefox
- 0как мне эффективно искать до и после элемента для ключевой фразы
- 0Как динамически настроить или изменить размер фонового изображения div в зависимости от размера контента
- 0Проверка формы jQuery - добавление новых ключевых слов на основе значения меню «Выбрать»
- 1Sklearn DecisionTreeclassifier возвращает невозможное значение для разделения
- 0Внутренняя ссылка без идентификатора в URL
- 0Angular: Есть ли способы перекомпилировать dom?
- 1Преобразование части строк информационного кадра из чисел в дату и время, но получили странные числа
- 0Изменить стиль списка при помощи JavaScript
- 1Pyspark - отдельные записи на основе 2 столбцов в датафрейме
- 0как получить строку, содержащуюся в div
- 0Проблемы с функцией обратного вызова
- 0Изменить цвет определенного ряда с помощью модуля выбора
