Как найти и обновить конкретную запись в js datatables - PullRequest
Новая
       1

Как найти и обновить конкретную запись в js datatables

0 голосов
/ 12 февраля 2019

Мне нужно перебрать datatable, найти запись с заданным идентификатором и обновить ее (только эту). 

<table id="data_tables">
<thead>
    <tr>
        <td value="id">id_value</td>
        <td>Name</td>
        <td>Surname</td>
    <tr>      
</thead>
<tbody>
    <!-- Datarow 1 -->
    <tr>
        <td value="1">1</td>
        <td>John</td>
        <td>Wayne</td>
    </tr>
    <!-- Datarow 2 -->      
    <tr>
        <td value="2">2</td>
        <td>Clark</td>
        <td>Kent</td>
    </tr>
    <!-- Datarow 3 -->      
    <tr>
        <td value="3">3</td>
        <td>John</td>
        <td>Romero</td>
    </tr>
</tbody>
</table>

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

    var counter = 0; //to tell me if rows numer is fine

    var table = $('#data_tables').DataTable(); //to grab anchor to datatable again

    //datatable way
    table.rows().every( function () {
        counter = counter + 1;
        //I don't know how to adress current row in a loop in datatable api     
        if(current_row.value_or_content == 10){

          current_row[1].value = 'New Name';
          current_row[1].value = 'New Surname';

        }

    } );

    alert(counter); //that is why I know that looping works ok
    table.draw(); //to keep filters ok

Вот как я пытался, но в любом случае было бы хорошо.Вероятно, даже лучше без циклов (проблемы со скоростью, если много данных в датированных?)

Ответы [ 2 ]

0 голосов
/ 12 февраля 2019

Вам не нужно выполнять весь утомительный почерк HTML, вы можете получить исходный код своей таблицы, используя объект javascript (это то, что я сделал в следующем примере).

Вы правы, есть встроенныйитератор строк DataTables, это every() метод.

Что вам нужно сделать, это, в основном, получить необходимую запись, изменить ее, rows().remove() oldзапишите, row.add() новый и повторите draw().

Вот это DEMO : 

//Define source data
var dataSrc = [
  {id:1, name: 'John', lastname: 'Wayne'},
  {id:2, name: 'Clark', lastname: 'Kent'},
  {id:3, name: 'John', lastname: 'Romero'},
];
//Define DataTable object
var dataTable = $('#data_tables').DataTable({
  sDom: 't',
  data: dataSrc,
  columns: [
    {title: 'id', data: 'id'},
    {title: 'name', data: 'name'},
    {title: 'lastname', data: 'lastname'},
  ]
});
//Create dynamically interface for editing
$('body').append(`
<div id="editingform" style="display:none">
  <select id="idselector">
    <option value="" disabled selected>id</option>
  </select>
</div>
`);
//Append fields that correspond to table columns minus id column
dataTable.columns().every(function(){
  if(this.dataSrc() == 'id') return;
  $('#editingform').append(`
    <input class="fieldsinput" datasrc="${this.dataSrc()}" placeholder="${this.dataSrc()}"></input>
  `);
});
//Populate id select with possible options
$.each(dataTable.column(0).data(), function(index, value){
  $('#idselector').append(`
    <option value="${value}">${value}</option>
  `);
});
//Append 'Edit' button and make editing form visible
$('#editingform').append(`<button id="editbutton">Edit</button>`);
$('#editingform').show();
//Listen for id selection and populate input fields
$('#idselector').on('change', function(){
  //Grab row with matching 'id' value
  let rowData = dataTable.rows(`:has(td:eq(0):contains('${$(this).val()}'))`).data()[0];
  //Update input fields
  $.each(rowData, function(index, value){
    $(`input[datasrc="${index}"]`).val(value);
  });
})
//Change source data upon 'Edit' button click and redraw dataTable
$('#editbutton').on('click', function(){
	//Prepare new entry
	let newEntry = {id:$('#idselector').val()};
	$.each($('.fieldsinput'), function(){
		newEntry[$(this).attr('datasrc')] = $(this).val();
	});
	//Remove corresponding column, add new and redraw
	dataTable.rows(`:has(td:eq(0):contains("${newEntry.id}"))`).remove();
	dataTable.row.add(newEntry);
	dataTable.draw();
});
<!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="data_tables"></table>
</body>
0 голосов
/ 12 февраля 2019

Вы можете передать дополнительные параметры в обратном вызове функции для API rows().every().Используйте rowIdx для отслеживания и проверки индекса строки таблицы, а затем удалите его.

Если вы хотите получить доступ к данным строки, вы можете использовать this.data().Он вернет массив, содержащий данные строки.Например, если текущая строка является первой, возвращаемые данные должны быть: 

[
"1",
"John",
"Wayne"
]


$(document).ready(function() {
  const table = $('#data_tables').DataTable(); //to grab anchor to datatable again

  //datatable way
  table.rows().every(function(rowIdx, tableLoop, rowLoop) {
    // The checks the id of the current row
    if (this.data()[0] === "1") {

      console.log(`This is row number ${rowIdx+1}`);
      console.log(`This is this row's data:`);
      console.log(this.data());
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<table id="data_tables" cellspacing="1">
  <thead>
    <tr>
      <th value="id">id_value</th>
      <th>Name</th>
      <th>Surname</th>
    </tr>
  </thead>
  <tbody>
    <!-- Datarow 1 -->
    <tr>
      <td value="1">1</td>
      <td>John</td>
      <td>Wayne</td>
    </tr>
    <!-- Datarow 2 -->
    <tr>
      <td value="2">2</td>
      <td>Clark</td>
      <td>Kent</td>
    </tr>
    <!-- Datarow 3 -->
    <tr>
      <td value="3">3</td>
      <td>John</td>
      <td>Romero</td>
    </tr>
  </tbody>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...