DataTables - использование дополнительных параметров

@masli · Регистрация: 27.03.2013

Студворк — интернет-сервис помощи студентам

Кто пользуется плагином https://www.datatables.net/, поделитесь настройками, которые используете, чтобы например избежать вот такого результата.

Таблица формируется полностью динамически, от начал и до конца (используются также теги thead и tbody)

@masli · 27.02.2019, 09:54 **[ТС]**

https://thimbleprojects.org/alex-r/644579

вот проект.

@masli · 28.02.2019, 09:31 **[ТС]**

на https://jsfiddle.net/ не получается загрузить, проект состоит из множества подключаемых плагинов, я пробовал, но ничего не получилось,
здесь код создания таблицы не могу загрузить, он большой, он кстати тянет за собой несколько плагинов.
если нужно прикреплю файл создания таблицы.

@Уф · 28.02.2019, 11:06

да я понял. проблема что на второй странице пропадает желтый цвет?

@masli · 28.02.2019, 17:21 **[ТС]**

Сообщение от Уф

проблема что на второй странице пропадает желтый цвет?

да, ну и толщина линий ячеек, вот мои стили для таблиц

во общем то и все

вот настройки стилей для таблицы

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/*применить настройки по умолчанию*/
        function applySettingsDefault() {
 
            /*Стили для таблицы*/
            styleAttributesForTable = {
                'border': "solid 2px blue",
                'border-collapse': 'collapse', /*убираем расстояние между ячейками*/
                'margin-top': '2%',
                'padding-top': '2%',
                'margin-left': '2%',
                'margin-bottom': '2%',
                'margin-right': '10%',
                'height': '40%',
                'width': '100%',
                'background-color': '#FFFFE0',
                'cellspacing': '0'
            };
 
            /*атибуты стиля тега 'th'*/
            styleAttributesForTh = {
                'border': 'solid 1px green',
                'padding': '5px',
                'width': 'auto',
                'font-size': '18px',
                'font-style': 'italic'
            };
 
            /*атибуты стиля тега 'td'*/
            styleAttributesForTd = {
                'border': 'solid 1px purple',
                'width': 'auto',
                'font-size': '15px'
            };
 
        }

для dataTables

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 /*применить стили для таблицы, в случае использования плагина dataTables*/
        function applyStyleForDataTables() {
            /*делаем отступ между таблицей и полем поиска
            * '.dataTables_filter' - селектор для div, который содержит
             * строку поиска
             * '.dataTables_length' - селектор для div, который содержит
             * элемент для выбора количества вывода строк, при постраничном выводе
             * '.dataTables_info' - селектор для div, который содержит информационную
             * строку внизу таблицы
             * '.dataTables_paginate' -  селектор для div, который содержит
             * кнопки перелистовывания страниц
             * */
 
            var selectorFilter = '.dataTables_filter';
            var selectorLength = '.dataTables_length';
            var selectorInfo = '.dataTables_info';
            var selectorPaginate = '.dataTables_paginate';
 
            applyStyle(selectorFilter, {
                'margin-bottom': '10px'
            });
 
            /*надпись*/
            applyStyle(selectorFilter + ' ' + 'label', {
                'font-size': '15px',
                'font-style': 'italic',
                'color': 'blue'
            });
 
            /*поле поиска*/
            applyStyle(selectorFilter + ' ' + 'label' + ' ' + 'input', {
                'border': 'solid 1px #000099',
                'font-style': 'italic',
                'font-family': 'Calibri'
            });
 
            applyStyle(selectorLength, {
                'margin-bottom': '10px'
            });
 
            /*надпись*/
            applyStyle(selectorLength + ' ' + 'label', {
                'font-size': '15px',
                'font-style': 'italic',
                'color': 'blue'
            });
 
            /*выбор количества строк*/
            applyStyle(selectorLength + ' ' + 'label' + ' ' + 'select', {
                'border': 'solid 1px #000099',
                'padding-left': '5px',
                'margin-left': '5px',
                'margin-right': '5px'
 
            });
 
            /*заголовки колонок*/
            applyStyle('table.dataTable thead tr th', {
                'border': '1px solid #ccc'
            });
 
            /*таблица*/
            applyStyle('table', {
                'border': '2px solid #330099'
 
            });
 
            /*ячейки таблицы*/
            applyStyle('table td', {
                'border': '0.5px solid #330099',
                'background': '#FFFFC1'
            });
 
            /*общий стиль для заголовков таблицы*/
            applyStyle('table th', {
                'border': '0.5px solid #330099'
 
            });
 
            /*информационная строка внизу таблицы*/
            applyStyle(selectorInfo, {
                'font-style': 'italic',
                'color': 'blue',
                'margin-bottom': '10px',
                'margin-top': '10px',
                'font-family': 'Calibri'
            });
 
            applyStyle(selectorPaginate, {
                'margin-bottom': '10px',
                'margin-top': '10px',
                'font-style': 'italic',
                'color': 'blue',
                'font-family': 'Calibri'
            });
 
        }

Добавлено через 1 минуту
привязку делал к селекторам , которые генерирует DataTables.

@masli · 28.02.2019, 22:40 **[ТС]**

Еще заметил неприятную вещь:

JavaScript
1
2
columnDefsForDataTables: [
            {targets: [2], visible: false}, /*скрыть указанный столбец*/

эта настройка полностью удаляет столбец со страницы, как будто его и не было, таким образом при парсинге таблицы и
чтению данных, JSON получается таким, что из него выпадают скрытые столбцы, а значить сервер не примет такой JSON,
на обработку.

Есть ли возможность сркрывать нужный столбец, но чтобы он не исчезал из Dom-структуры.
На рисунке видно, что он отсутствует...

@masli · 02.03.2019, 12:44 **[ТС]**

оказывается, при листании страниц таблицы, сбрасываются все события, которые были загружены, соответственно сбрасываются и стили.

при возвращении на 1-ю страницу, все события работают как и при загрузке.

Как можно восстанавливать функциональность страницы, к какому событию нужно привязаться

Выходит постраничный просмотр это только для чтения ?

Ну тогда какой смысл в использовании такого режима или же можно как то поправить данную ситуацию?

@Уф · 02.03.2019, 13:08

я даже не знаю откуда у тебя столько проблем, зачем тебе желтая таблица? я использую стандартные стили и классы, все листается как надо

@masli · 02.03.2019, 20:23 **[ТС]**

Сообщение от Уф

все листается как надо

да листается, но когда назначаю события на строки таблицы, например могу выделить или снять выделение, при выделении строк появляются кнопки удалить и обновить и т.д., при переходе на другую страницу, весть функционал теряется, он работает только для первого листа в таблице

@Уф · 02.03.2019, 20:31

ты должен использьвать метод on

JavaScript
1
2
3
4
5
var table = $('#tblWh').dataTables({...});
    table.on( 'click', 'tr', function () {
        table.$('tr.selected').removeClass('selected'); $(this).addClass('selected');
        var WhId = table.fnGetData(table.$('tr.selected'),"key:name") || -1;
    })

@masli · 03.03.2019, 12:15 **[ТС]**

1.

Вот заработал подключаемый внешний плагин даже при листании страниц таблицы и выделение строк работает.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var selector = '.divContainer'; /*точка в документе для привязки таблицы*/
var selectorTableForDataTables; /*контекст всей таблицы, при использовании плагина DataTables*/
 
 $(selector).dataTables({...});
 
var $td = selectorTableForDataTables.$('td');
 
$td.modalBoxCellEdit();/*плагин для редактирования ячеек*/
 
/*выборка нескольких строк*/
   fetchRows(selectorTableForDataTables);
 
 function fetchRows(table) {
 
            table.on( 'click', 'tr', function () {
 
 
               // table.$('tr.selected').removeClass('selected');
 
 
            /*проверяем, назначен ли указанный селектор, для текущей строки*/
                var isSelector = $(this).hasClass('selected');
 
                if (!isSelector) {/*если не назначен, добавляем селектор*/
 
                    $(this).addClass('selected'); /*добавляем класс*/
 
                } else {
                    $(this).removeClass('selected');
                }
 
            });
 
 
        //    var WhId = table.fnGetData(table.$('tr.selected'),"key:name") || -1;
 
 
        }

Для данного кода не нужно более ничего, плагин DataTables сам предоставит возможности выделять строку желтым цветом и у вас в выделенной строке будет создан класс, к которому можно будет привязаться при парсинге выделенных строк.

JavaScript
1
 table.$('tr.selected').removeClass('selected');

не работает

JavaScript
1
var WhId = table.fnGetData(table.$('tr.selected'),"key:name") || -1;

не работает

table.fnGetData is not a function

2.

JavaScript
1
var table = $('#tblWh').dataTables({...});

Используя это, мы получаем доступ к пространству имен, которое создает плагин DataTables при работе с текущей таблицей ?
Это своего рода context, отличный от контекста DOM-дерерва документа на текущей странице и поэтому я не мог управлять таблицей при перелистывании?

3.

JavaScript
1
 table.$('tr.selected')

поясните этот синтаксис . почему $ после переменной поставлен ?

4.

Для чего эта строка кода ?

JavaScript
1
var WhId = table.fnGetData(table.$('tr.selected'),"key:name") || -1;

согласно документации:

Добавление в таблицу одной новой строки или несколько строк данных. Обратите внимание, что это подходит только для обработки на стороне клиента - если вы используете обработку на стороне сервера (т.е. "bServerSide": true), то для добавления данных необходимо добавить ее в источник данных, то есть на серверную сторону, через Ajax-вызов.

?

Добавлено через 3 часа 16 минут
из стилей, заработал только

JavaScript
1
2
3
4
applyStyle(table.$('td'), {
               'border': '0.5px solid #330099',
                'background': '#FFFFC1'
            });

фон для ячеек и рамка для ячеек, то есть работает даже при перелистывании

стиль для заголовка и для тега table, не работает.

не понимаю как выполнить привязку для такой записи

JavaScript
1
table.$(......)

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
            /*заголовки колонок*/
       /*     applyStyle('table.dataTable thead tr th', {
                'border': '1px solid #ccc'
            });*/
 
            applyStyle(table.$('th.display'), {
           //    'border': '1px solid #ccc'
            });
 
            /*таблица*/
           /* applyStyle('table', {
                'border': '2px solid #330099'
 
            });*/
 
            applyStyle(table.$('table.tableFirst'), {
             //  'border': '2px solid #330099'
 
            });
 
            /*ячейки таблицы*/
          /*  applyStyle('table td', {
                'border': '0.5px solid #330099',
                'background': '#FFFFC1'
            });*/
 
            applyStyle(table.$('td'), {
               'border': '0.5px solid #330099',
                'background': '#FFFFC1'
            });
 
            /*общий стиль для заголовков таблицы*/
          /*  applyStyle('table th', {
                'border': '0.5px solid #330099'
 
            });*/

@masli · 03.03.2019, 21:13 **[ТС]**

а вот функция по созданию массива строк в JSON, которые были выделены.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
         /*парсинг html и вывод в Json*/
        function parseTableJson(table) {
 
            /*объект таблицы в DOM*/
            var tableSelector = table.$('tbody > tr');
 
            /*Массив json из значений таблицы*/
            var arrayJson = [];
 
            /*Внешний цикл, добавляет обработаные строки в массив arrayJson*/
            $.each(tableSelector, function (i, val) {
 
                /*получил элементы в строке*/
                var tr = val.childNodes;
                
                /*получаю все значения атрибута class, для текущего тега 'tr'*/
                var classNameTr = val.getAttribute('class');
 
               /*првоеряю есть ли указанный класс*/
                var isClass = classNameTr.toLowerCase().indexOf('selected') + 1;
 
                var row = {};
                /*ассоциативный массив для текущей строки*/
 
                /*внутренний массив для обработки текущей строки
                * (обрабатываются ячейки)*/
                $.each(tr, function (i, keyValue) {
 
                    /*получаю значение атрибута name, для текущей ячейки*/
                    var name = $(keyValue).attr('name');
 
                    /*получаю значение из текущей ячейки;
                    *создаю запись в ассоциативном массиве*/
                    row[name] = $(keyValue).html();
                });
 
                /*если строка имеет нужный класс, тогда добавляем элемененты
                данной строки в JSON-массив*/
                if (isClass) {
 
                    /*добавляю в массив arrayJson, ассоциативный массив,
                    * созданный из ячеек текущей строки*/
                    arrayJson.push(row);
                }
 
            });
 
            /*если ничено не выделено очищаю переменную.*/
            if(arrayJson.length === 0){
                arrayJson= null;
            }
            console.log(arrayJson);
        }}

В качестве селектора использовал полученный контекст таблицы, как ты и показал.

Или усложнил код, может проще можно ?

@Уф · 03.03.2019, 22:18

не понимаю что там за астрономические велосипеды ты городишь
ты хочешь выделять с нескольких страниц строки и их получить в json?
ты сам сначала цитируешь мою строку

JavaScript
1
var table = $('#tblWh').dataTables({...});

а потом пишешь
не понимаю как выполнить привязку для такой записи
table.$(......)

просто присваиваешь таблицу в переменную при применении плагина

@masli · 04.03.2019, 09:50 **[ТС]**

Сообщение от Уф

ты хочешь выделять с нескольких страниц строки и их получить в json?

нет,
выделение строк только на одной странице, то есть тех что нужно удалить, потом перебор на данной странице, выделенных строк и отправка на сервер информации о том, записи с каким id нужно удалить.
у меня ранее работало только на одной странице, при переходе на другую страницу, события сбрасывались, теперь это работает.

по кнопке 'обновить', перебирается текущая страница (кнопка появится если хоть одна ячейка редактировалась.) и все строки собираются в JSON, на стороне сервера они преобразуются в коллекцию, типа List и происходит обновление в базу данных.

В примере, я для простоты сделал вывод в консоль, непонятная часть была в том, чтобы все события которые я назначил,
смогли работать и при листании страниц таблицы.
Так же не знал, как перебрать выделенные строки.

Вот и все.

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@masli 52 / 18 / 11 Регистрация: 27.03.2013 Сообщений: 789

	DataTables - использование дополнительных параметров 13.02.2019, 22:58. Показов 16210. Ответов 32 Метки нет (Все метки) Кто пользуется плагином https://www.datatables.net/, поделитесь настройками, которые используете, чтобы например избежать вот такого результата. Таблица формируется полностью динамически, от начал и до конца (используются также теги thead и tbody) Миниатюры 0

@masli 52 / 18 / 11 Регистрация: 27.03.2013 Сообщений: 789
	27.02.2019, 09:54 [ТС]
	https://thimbleprojects.org/alex-r/644579 вот проект. 0

@masli 52 / 18 / 11 Регистрация: 27.03.2013 Сообщений: 789
	28.02.2019, 09:31 [ТС]
	на https://jsfiddle.net/ не получается загрузить, проект состоит из множества подключаемых плагинов, я пробовал, но ничего не получилось, здесь код создания таблицы не могу загрузить, он большой, он кстати тянет за собой несколько плагинов. если нужно прикреплю файл создания таблицы. 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	28.02.2019, 11:06
	да я понял. проблема что на второй странице пропадает желтый цвет? 0

@masli 52 / 18 / 11 Регистрация: 27.03.2013 Сообщений: 789
	02.03.2019, 12:44 [ТС]
	оказывается, при листании страниц таблицы, сбрасываются все события, которые были загружены, соответственно сбрасываются и стили. при возвращении на 1-ю страницу, все события работают как и при загрузке. Как можно восстанавливать функциональность страницы, к какому событию нужно привязаться Выходит постраничный просмотр это только для чтения ? Ну тогда какой смысл в использовании такого режима или же можно как то поправить данную ситуацию? 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	02.03.2019, 13:08
	я даже не знаю откуда у тебя столько проблем, зачем тебе желтая таблица? я использую стандартные стили и классы, все листается как надо 0