Не отменялся выбор при нумерации страниц - Datatable
У меня есть datatable с опцией select all. Моя таблица данных содержит файлы и ссылки. Мне нужно выбрать только строки, содержащие файлы. там отображается выбранный счет. Мой код ниже
var mydata = $('#document-table').DataTable({
"dom": 'Bfrtip',
"info": false,
"pageLength": 20,
"searching": false,
"lengthChange": false,
"select": {
'style': 'multi',
'selector': 'tr:not(.no-select)'
},
"rowCallback": function( row, data, index ){
if (data[2] == ''){
$('td:eq(0)', row).removeClass('select-checkbox');
$(row).addClass('no-select');
}
else {
$(row).removeClass('no-select');
}
},
"columnDefs": [
{
'targets': 0,
'checkboxes': {
'selectRow': true
},
'render': function(){
return '';
}
},
],
"order": [[ 1, 'asc' ]],
});
mydata.on("click", "th.select-checkbox", function() {
if ($("th.select-checkbox").hasClass("selected")) {
mydata.rows().deselect();
$("th.select-checkbox").removeClass("selected");
} else {
mydata.rows().select();
$("th.select-checkbox").addClass("selected");
}
}).on("select deselect", function() {
var count = mydata.rows({
selected: true
}).count();
if (count !== mydata.rows().count()) {
$("th.select-checkbox").removeClass("selected");
} else {
$("th.select-checkbox").addClass("selected");
}
mydata.rows('tr.no-select').deselect();
});
Мне нужно отменить выбор каждой строки с классом «.no-select», когда я нажимаю кнопку «Выбрать все». Мой код работает для первой страницы. Но на других страницах выбраны все строки. Как я могу решить проблему?
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
0
0
310
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Мы можем изменить вариант обратного вызова,
от
"rowCallback"
в это
"createdRow"
Согласно документации, rowCallback срабатывает перед визуализацией узла строки в документе, а createdRow срабатывает после вставки узла строки в DOM.
Ссылка: рядОбратный вызов , createdRow
Затем с помощью API $() для выполнения действия выбора Jquery для полной таблицы внутри флажка «выбрать все» при событии щелчка.
The selector given to the $() method will be run on all of the tr elements in the table, and their descendent elements, with the found elements being returned as a jQuery object.
ссылка: $()
Вы можете отфильтровать селектор следующим образом
tr:not(.no-select)
в это
table
.DataTable()
.$('tr:not(.no-select)')
.toggleClass("selected",this.checked);
Не так идеально, см. Образец, основанный на вашем требовании ниже.
Example of empty 2nd column is on page 1 and 4
var mydata = $(document).ready(function() {
$('#example').DataTable( {
"dom": 'Bfrtip',
"info": false,
"searching": false,
"lengthChange": false,
"createdRow": function( row, data, index ){
if (data[2] == ''){
$('td:eq(0)', row).removeClass('select-checkbox');
$(row).addClass('no-select');
}
else {
$(row).removeClass('no-select');
}
},
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'multi',
selector: 'tr:not(.no-select)'
},
order: [[ 1, 'asc' ]]
} );
} )
mydata.on("click", "th.select-checkbox input", function() {
var table = $(this).closest('table');
//update botton checkbox
table.find('th.select-checkbox input').prop('checked', this.checked);
//update all data across all pages
table
.DataTable()
.$('tr:not(.no-select)')
.toggleClass("selected",this.checked);
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src = "https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
<link href = "https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel = "stylesheet" />
<link href = "https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css" rel = "stylesheet" />
<table id = "example" class = "display" style = "width:100%">
<thead>
<tr>
<th class = "select-checkbox"><input type = "checkbox"></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>$320,800</td>
</tr>
<tr>
<td></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>$170,750</td>
</tr>
<tr>
<td></td>
<td>Ashton Cox</td>
<td></td>
<td>San Francisco</td>
<td>66</td>
<td>$86,000</td>
</tr>
<tr>
<td></td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>$433,060</td>
</tr>
<tr>
<td></td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>$162,700</td>
</tr>
<tr>
<td></td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>$372,000</td>
</tr>
<tr>
<td></td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>$137,500</td>
</tr>
<tr>
<td></td>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>$327,900</td>
</tr>
<tr>
<td></td>
<td>Colleen Hurst</td>
<td></td>
<td>San Francisco</td>
<td>39</td>
<td>$205,500</td>
</tr>
<tr>
<td></td>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>$103,600</td>
</tr>
<tr>
<td></td>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>$90,560</td>
</tr>
<tr>
<td></td>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>$342,000</td>
</tr>
<tr>
<td></td>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>$470,600</td>
</tr>
<tr>
<td></td>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>$313,500</td>
</tr>
<tr>
<td></td>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>$385,750</td>
</tr>
<tr>
<td></td>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>$198,500</td>
</tr>
<tr>
<td></td>
<td>Paul Byrd</td>
<td></td>
<td>New York</td>
<td>64</td>
<td>$725,000</td>
</tr>
<tr>
<td></td>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>$237,500</td>
</tr>
<tr>
<td></td>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>$132,000</td>
</tr>
<tr>
<td></td>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>$217,500</td>
</tr>
<tr>
<td></td>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>$345,000</td>
</tr>
<tr>
<td></td>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>$675,000</td>
</tr>
<tr>
<td></td>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>$106,450</td>
</tr>
<tr>
<td></td>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>$85,600</td>
</tr>
<tr>
<td></td>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>$1,200,000</td>
</tr>
<tr>
<td></td>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>$92,575</td>
</tr>
<tr>
<td></td>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>$357,650</td>
</tr>
<tr>
<td></td>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>$206,850</td>
</tr>
<tr>
<td></td>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>$850,000</td>
</tr>
<tr>
<td></td>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>$163,000</td>
</tr>
<tr>
<td></td>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>$95,400</td>
</tr>
<tr>
<td></td>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>$114,500</td>
</tr>
<tr>
<td></td>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>$145,000</td>
</tr>
<tr>
<td></td>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>$235,500</td>
</tr>
<tr>
<td></td>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>$324,050</td>
</tr>
<tr>
<td></td>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>$85,675</td>
</tr>
<tr>
<td></td>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>$164,500</td>
</tr>
<tr>
<td></td>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>$109,850</td>
</tr>
<tr>
<td></td>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>$452,500</td>
</tr>
<tr>
<td></td>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>$136,200</td>
</tr>
<tr>
<td></td>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>$645,750</td>
</tr>
<tr>
<td></td>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>$234,500</td>
</tr>
<tr>
<td></td>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>$163,500</td>
</tr>
<tr>
<td></td>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>$139,575</td>
</tr>
<tr>
<td></td>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>$98,540</td>
</tr>
<tr>
<td></td>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>$87,500</td>
</tr>
<tr>
<td></td>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>$138,575</td>
</tr>
<tr>
<td></td>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>$125,250</td>
</tr>
<tr>
<td></td>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>$115,000</td>
</tr>
<tr>
<td></td>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>$75,650</td>
</tr>
<tr>
<td></td>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>$145,600</td>
</tr>
<tr>
<td></td>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>$356,250</td>
</tr>
<tr>
<td></td>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>$103,500</td>
</tr>
<tr>
<td></td>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>$86,500</td>
</tr>
<tr>
<td></td>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>$183,000</td>
</tr>
<tr>
<td></td>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>$183,000</td>
</tr>
<tr>
<td></td>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class = "select-checkbox"><input type = "checkbox"></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
</table>Другие вопросы по теме
Автозаполнение JQuery возвращает пустые результаты
Сделать вкладки пользовательского интерфейса Jquery динамически доступными для поиска
Пользовательский стиль для jQuery «Selectmenu»
Как добавить инкрементный идентификатор из PHP в jquery?
Как показать выходное значение в браузере
Jquery сортируемое перемещение дубликатов вниз
Когда я изменяю размер окна браузера, мои изображения перемещаются, когда они должны оставаться вместе
Как я могу запретить пользовательскому интерфейсу JQuery управлять моим меню выбора
Добавить класс в средство выбора даты
'TypeError: $(...).sortable не является функцией', летняя заметка и сортируемый конфликт?
Похожие вопросы
Ajax не отправляет изображение
Как создать линию неправильной кривой с помощью CSS3, HTML5, SVG и Jquery?
Проблема с позицией модального окна начальной загрузки и его закрытием при закрытии
Измените четыре div один раз, используя setinterval() 30s
Как я могу обновить диаграмму без обновления страницы?
Изменение цвета цвета текста на основе оператора case switch значения
Заголовок выпадающей таблицы скрыт таблицей
Вторая функция AJAX завершается ошибкой, когда другая функция AJAX уже выполнена
Как изменить язык плитки OpenLayers 5.3
Добавить переменную без потери форматирования
строки со второй страницы не были выбраны