Datatablesで行のデータを取得するときにエラーが発生し、なぜそれが発生しているのか理解できません。
ドキュメントを読んで、行データを取得するのは次のように簡単です。
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'tr', function () {
console.log( table.row( this ).data() );
} );
だから、私はそれがサーバー側に記入されているJinja2テンプレートを持っています（Python 3ではフラスコを使用しています）：
<table id="table" class="dataTable display responsive nowrap" cellspacing="0" width="100%">
<thead>
.....
</thead>
<tbody>
.....
</tbody>
</table>
そして、Datatableを次のように初期化します。
function createDatatable() {
$('#table').DataTable({
"select": "single",
"order": [[2, "asc"]],
"language": {.....}
}
});
}
そして、いくつかのイベントを添付します。
function attachEvents() {
$('#table tbody').on('click', 'td.tdCredits', function () {
var table = $('#table').DataTable();
var rowId = table.row(this).data()[0];
});
.....
}
それから私はします：
$(document).ready(function() {
createDatatable();
attachEvents();
});
したがって、このコードでクリックした行のデータを取得したい場合（選択されているかどうかに関係なく）、コンソールでエラーが発生します。
TypeError: table.row(...).data(...) is undefined
私が間違っているのは何ですか？レンダリングされたテーブルを確認できるため、ページネーションボタンを使用して、列を並べ替えることもできます。
$(document).ready(function() {
createDatatable();
attachEvents();
});
function createDatatable() {
$('#table').DataTable({
"select": "single",
"order": [[2, "asc"]]
});
}
function attachEvents() {
$('#table tbody').on('click', 'td.tdCredits', function () {
var table = $('#table').DataTable();
var rowData = table.row(this).data();
console.log('Clicked row data: ' + rowData);
var rowId = table.row(this).id();
console.log('Clicked row id: ' + rowId);
// Other code
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="table" class="dataTable display responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th style="display: none;"></th>
<th class="text-center">Header 1</th>
<th class="text-center">Header 2</th>
<th class="text-center">Header 3</th>
<th class="text-center">Header 4</th>
<th class="text-center">Header 5</th>
<th class="text-center">Header 6</th>
<th class="text-center">Header 7</th>
</tr>
</thead>
<tbody>
<tr id="someId" class="filter">
<td style="display: none;"></td>
<td class="text-center">Cell 1</td>
<td class="text-center">Cell 2</td>
<td class="text-center">Cell 3</td>
<td class="text-center">Cell 4</td>
<td class="text-center tdCredits">Click here</td>
<td class="text-center">Cell 6</td>
<td class="text-center">Cell 7</td>
</tr>
</tbody>
</table>わかりました。問題を解決するトリックを見つけました。「。data（）」にアクセスする必要はありません。
私が抱えていた問題は、各行のいくつかのフィールドを編集できるためです。そのため、行のフィールドの1つを初めてクリックすると、その行が選択されて使用できるようになります。
table.row({ selected: true }).index();
ただし、他のフィールドをもう一度クリックすると、行の選択が解除され、フィルターselected:trueが機能しなくなります。
フィドルを実行すると、Datatablesがで指定されたIDを使用していることがわかりました
<tr id="someId" ..>
内部値の代わりに。そこで、ID値をメソッドに渡し、行を強制的に選択します。
table.row('#' + id).select();
そして、私は使用することができます：
var rowIndex = table.row({ selected: true }).index();
そして、最初に表示されている行のフィールドではなく、適切なフィールドを更新します。
table.cell({row:rowIndex, column:columnIndex}).data(newValue).draw();
よろしく！
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加