Получить данные из строки с отмеченным чекбоксом таблицы Jquery DataTables

@ValeraMez · Регистрация: 29.01.2017

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

Есть таблица, выведенная из MySQL. Для сортировки и постраничной навигации используется плагин Jquery DataTables.
Плагин подключил таким образом:

JavaScript
1
2
3
<script type="text/javascript">
$(document).ready(function() {var table = $("#part_s").DataTable({'columnDefs': [{'targets': -1, 'checkboxes': {'selectRow': true} }], 'select': {'style': 'multi'}, 'render': function (data, type, full, meta){return '<input type="checkbox">';}, }) });
</script>

Часть кода вывода таблицы:

PHP
1
2
3
4
echo '<tbody>';
while($data = mysql_fetch_array($qr_result)){ 
echo '<tr class="rowlink_table_parts">';
echo '<td class="id">' . $data['NumPP_Part'] . '</td>';

В <td class="id">' . $data['NumPP_Part'] . '</td> - номер по порядку (он же первичный ключ в таблице БД).

Как получить значение этой ячейки в строке, где выбран чекбокс?

@Уф · 10.02.2017, 15:17

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
$(document).ready(function() {
var table = $("#part_s").DataTable({
    'columnDefs': [{'targets': -1, 'checkboxes': {'selectRow': true} }],
    'select': {'style': 'multi'},
    'render': function (data, type, full, meta){return '<input type="checkbox" class="selbox">';},
 }) 
 
$('#part_s').on('click', 'input.selbox', function(){
    var chk = $(this).prop('checked');
    if(chk) $(this).parent().parent().addClass('selrow');
    else $(this).parent().parent().removeClass('selrow');
});
 
//значение
   var cell = table.fnGetData(table.$('tr.selrow'), номер колонки);
</script>

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

@ValeraMez · 10.02.2017, 16:44 **[ТС]**

Плагин класс на строки не добавляет, остаётся rowlink_table_parts

На строке var cell = table.fnGetData(table.$('tr.selrow'), номер колонки); консоль лога выводит table.fnGetData is not a function
Рекомендуют на row().data() заменить. Но как это сделать? Просто невозможно работать с этим перемудрённым плагином, проще другой использовать.

Добавлено через 30 минут
Или ещё лучше бросить писать это приложение, выбрать иное для учебно-практических целей.
Школа всё равно времени мало оставляет.

@Уф · 10.02.2017, 17:37

просто у тебя инициализация с большой буквы DataTables и dataTables по разному немножко работают
попробуй

JavaScript
1
 table.cell(table.$('tr.selrow'), номер_колонки).data();

@ValeraMez · 11.02.2017, 18:09 **[ТС]**

Т.е. по разному работают?

Вывожу дальше cell через alert - неопределённая переменная cell.

И так ли надо присваивать новый класс строке таблицы, если он уже есть (rowlink_table_parts)?

В ступоре от плагина. Неужели разработчики плагина не смогли нормально всё сделать?

Добавлено через 23 часа 52 минуты
Уф, спасибо за помощь и код.
Думаю обойтись без чекбоксов, на этом примере:

HTML5
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
<button id="button">btn</button>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Id</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
    </tbody>
</table>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function () {
    var table = $('#example').DataTable();
 
    $('#example tbody').on('click', 'tr', function () {
        $(this).toggleClass('selected');
    });
 
    $('#button').click(function () {
        var ids = $.map(table.rows('.selected').data(), function (item) {
            return item[0]
        });
        console.log(ids)
        alert(table.rows('.selected').data().length + ' row(s) selected');
    });
});

http://jsfiddle.net/arunpjohny/f4bppa43/

Новые блоги и статьи Все статьи Все блоги /
Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .

@ValeraMez 4 / 3 / 2 Регистрация: 29.01.2017 Сообщений: 54
	10.02.2017, 16:44 [ТС]
	Плагин класс на строки не добавляет, остаётся rowlink_table_parts На строке var cell = table.fnGetData(table.$('tr.selrow'), номер колонки); консоль лога выводит table.fnGetData is not a function Рекомендуют на row().data() заменить. Но как это сделать? Просто невозможно работать с этим перемудрённым плагином, проще другой использовать. Добавлено через 30 минут Или ещё лучше бросить писать это приложение, выбрать иное для учебно-практических целей. Школа всё равно времени мало оставляет. 0