Как получить доступ к элементам данных столбца, используя jQuery DataTables и флажки в качестве селекторов строк

Question

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

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

Вот HTML-код моей таблицы

<table id="MyTable" class="display table" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>
                <input type="checkbox" class="form-check-input" id="exampleCheck1">
            </th>
            <th>
                Name
            </th>
            <th>
                Last Name
                </div>
            </th>
            <th>
                Age
                <br>
            </th>
        </tr>

    </thead>
    <tbody id="tablePersons">
        <tr id="PersonId" style="display:none" class="result-item">

            <td></td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
        </tr>
    </tbody>
</table>

мое определение данных

var personTable= $('#MyTable').DataTable({
            bInfo: false, paging: false, bInfo : false,
            dom: 'lrtp',
            columnDefs: [ {
                    targets:   0,
                    checkboxes: {
                        selectRow: true
                    }
                }, 
                {
                    targets: 1,
                    className: 'textcolumn-left'
                }, 
                {
                    targets: 2,
                    className: 'textcolumn-left'
                },
                {
                    targets: 3,
                    className: 'textcolumn-left'
                }
            ]
            });

вот как я добавляю строку

personTable.row.add(['<input class="personTableCheckboxes" type="checkbox"  value="'+item.personID+'"  id="'+item.personID+'"> ',
                item.name, item.lastName, item.age]);

и вот как я получаю данные строки

var listOfCheckedRows = personTable.column(0).checkboxes.selected();

, если я делаю console.log(listOfCheckedRows), я получаю массив, который я могу повторять, если я повторяю его вот так

$.each(listOfCheckedRows , function(index, rowId){
            console.log(rowId) ;

        });

что console.log внутри цикла $ .each содержит строку, содержащую html строки с данными, я могу выполнить строковую функцию javascript, чтобы разделить строку и получить идентификатор флажка, который представляет идентификатор строки,но я не хочу этого делать, поскольку это не может быть эффективным, если в таблице более 10 тыс. строк.

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

Answer 1

//check the checkboxes and get data from foreach
<th>
<input type="checkbox" value="Check all" class="check-all" style="display: inline;"> Select all
</th>

<?php foreach ($orders as $value) { ?>
  <td>
    <input class='check-this pid' value="<?= $value->pid; ?>" type="checkbox" style="display: inline;">
  </td>
<?php } ?>

//check all using jQuery.

$('.check-all:checkbox').change(function(){
        if($(".check-all").prop('checked') == true){

        $('.check-this').prop('checked','checked');

        }
    else {
        $('.check-this').removeAttr('checked');
    }  
})

//get data 
  var pArr = [];

  $('#example').find(".pid").each(function() {
        if($(this).prop('checked') == true){
          pArr.push($(this).val());
        }
  });

Answer 2

Вы должны добавить строку, как показано ниже, а затем перерисовать таблицу с помощью draw().

personTable.row.add([item.personID, item.name, item.lastName, item.age]);

Тогда checkboxes.selected() вернет список, содержащий идентификаторы лиц.

Если вынужна дополнительная информация о выбранных строках, вы можете использовать код ниже:

var data = personTable.rows({ selected: true }).data();

Answer 3

Если я правильно понял ваш вопрос, это должно сработать:

EDIT2

var arrId = [];
$.each(listOfCheckedRows , function(index, row){
    arrId.push($(row).attr('id'));
});

var row = '<input class="personTableCheckboxes" type="checkbox" value="6" id="6">';

console.log($(row).attr("id"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>