jsデータテーブルで特定のレコードを見つけて更新する方法

debugcn 投稿 Dev

baron_bartek

ループしてdatatable、特定のIDを持つレコードを見つけ、それを更新する必要があります（これのみ）。

<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

これが私が試した方法ですが、とにかく良いでしょう。おそらくループなしでさらに良くなります（データテーブルに大量のデータがある場合は速度の問題がありますか？）

Ekown

rows().every()APIの関数コールバックで追加のパラメーターを渡すことができます。を使用し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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]