Флажки Datatables выбирают несколько на соответствующих идентификаторах - PullRequest
Новая
       12

Флажки Datatables выбирают несколько на соответствующих идентификаторах

0 голосов
/ 26 мая 2019

У меня есть установка данных на стороне сервера с плагином checkboxes.Каждый флажок содержит данные product_id.

var table = $('#display_users').DataTable( {
        "processing": true,
        "serverSide": true,
        'ajax': '{{ route ('/getUsers') }}',
        'columns' : [
            {"data" : "product_id"},
            {"data" : "product_id"},
            {"data" : "first_name"},
            {"data" : "last_name"},
            {"data" : "email"},
            {"data" : "company"},
            {"data" : "department"},
            {"data" : "created_at"}
        ],
        'columnDefs': [
            {
                'targets': 0,
                'checkboxes': {
                    'selectRow': true
                },

Я хотел бы иметь возможность, когда установлен флажок, выбрать все флажки с одинаковым идентификатором продукта.Это необходимо только для записей на текущей выбранной странице.Кажется, это должно быть возможно с флажками выбрать API, однако я пока не добился успеха

1 Ответ

2 голосов
/ 27 мая 2019

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

Однако на самом деле вам не нужно углубляться во внутренние механизмы подключаемого модуля 'checkbox', поскольку необходимую функцию можно легко кодировать с помощью встроенного API DataTables: 

//listen for the clicking first column checkboxes
$('#display_users').click('tbody td:eq(0) [type="checkbox"]', function(){
  //grab current checkbox state and criteria to match (product_id) from the row data
  const state = $(event.target).prop('checked');
  const productId = dataTable.row($(event.target).closest('tr')).data().product_id;
  //iterate through current page rows and adjust checkboxes upon matching product_id
  dataTable.rows({page:'current'}).every(function(){
    if(this.data().product_id == productId) $(this.node()).find('td:eq(0) [type="checkbox"]').prop('checked', state);
  });
});

Полная демоверсия этой концепции вы можете найти ниже: 

//data sample
const srcData = [
  {product_id: 7, first_name: 'Nick', last_name: 'Furry', company: 'Avengers Inc'},
  {product_id: 7, first_name: 'Steve', last_name: 'Rogers', company: 'Avengers Inc'},
  {product_id: 4, first_name: 'Arthur', last_name: 'Curry', company: 'Justice Ltd'},
  {product_id: 4, first_name: 'Clark', last_name: 'Kent', company: 'Justice Ltd'},
  {product_id: 4, first_name: 'Barry', last_name: 'Allen', company: 'Justice Ltd'}
];

//datatable initialization
const dataTable = $('#display_users').DataTable({
  dom: 't',
  order: [1, 'asc'],
  data: srcData,
  columns: [null, ...Object.keys(srcData[0])].map(header => ({title: header || '', data: header})),
  columnDefs: [
    {targets: 0, orderable: false, render: () => '<input type="checkbox"></input>'}
  ]
});

//essential part - row checkbox click hander
$('#display_users').click('tbody td:eq(0) [type="checkbox"]', function(){
  //grab current checkbox state and criteria to match (product_id)
  const state = $(event.target).prop('checked');
  const productId = dataTable.row($(event.target).closest('tr')).data().product_id;
  //iterate through current page rows and adjust checkboxes upon matching product_id
  dataTable.rows({page:'current'}).every(function(){
    if(this.data().product_id == productId) $(this.node()).find('td:eq(0) [type="checkbox"]').prop('checked', state);
  });
});
<!doctype html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="display_users"></table>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...