複数のjQueryデータテーブルを1ページに配置するにはどうすればよいですか？
https://stackoverflow.com/questions/1790065
-
22-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
JQuery Datatablesを使用して何かを見せたいです。
1つのページに1つのデータテーブルを配置してから、もう1つを追加するとうまく機能しますが、それらはほぼ同じ位置を占めていますが、そのうちの1つはうまくいきません。
それに対処する方法を知っていますか？
他のヒント
サーバーサイド処理で可能です。アプリケーションの多くの場所で動作しています。サーバー側の処理のためのサンプルコードに複数回従う必要があります...
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../examples_support/server_processing.php"
} );
} );
交換 #example と #id-of-your-table と "sAjaxSource": "../examples_support/server_processing.php" と "sAjaxSource": "url/to/your/server/side/script".
私の推測では、あなたが使用したと思います .dataTable 複数のテーブルの例からのセレクター。 Datatableクラスを使用して、すべてのテーブルに同じセットアップを適用します。
私はパーティーに遅れていますが、ここにあなたが説明する問題を解決するために使用した方法があります...
$('.testDataTable').each(function() {
var dataSource = $(this).attr("data-ajaxsource");
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": dataSource
});
});
基本的に、データテーブルインスタンスを介して繰り返し、データ属性によってソースセットを追加しています。データ属性に精通していない場合、それらは単に要素に適用されるタグです...
<div id="testDataTable" data-ajaxsource="http://myserver.com/json"></div>
または、または, 、HTML5データ属性を使用したくない場合は、SajaxSourceに直接読み取ることができる親の中に隠されたフィールドを使用できます...
$('.testDataTable').each(function() {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": $(this).children('childElement').html()
});
});
<table id="table1" class="display"> </table>
<table id="table2" class="display"> </table>
<table id="table3" class="display"> </table>
$(document).ready(function() {
$('table.display').dataTable();
} );
適切なクラスを提供する限り、3つのテーブルはすべて表示されます
単一ページに複数のデータテーブルがある場合 - 例から以下を使用しているかどうかを確認してください
"fnServerData": fnDataTablesPipeline
これにより、最初の呼び出しからのデータがキャッシュされます。 2番目のデータテーブルが同じ関数を使用している場合、データはすでに取得されており、AJAX呼び出しがデータを取得していないことがわかります。したがって、2番目の（nth）データテーブルにデータを受け取ることはありません。
まだそれに取り組んでいます...しかし、これは役立つかもしれません
<div class="col-md-12">
<!-- Custom Tabs -->
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">Web Design and Development</a></li>
<li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">Domain Registration</a></li>
<li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">Cloud Computing Services</a></li>
<li class=""><a href="#tab_4" data-toggle="tab" aria-expanded="false">Android application Development</a></li>
<li class=""><a href="#tab_5" data-toggle="tab" aria-expanded="false">Web Hosting</a></li>
<li class=""><a href="#tab_6" data-toggle="tab" aria-expanded="false">SEO and Online Marketing</a></li>
<li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_1">
<b>Web Deign and development hires:</b>
<table class="table" id="webdesignTable">
<thead>
<tr>
<th>S.no</th>
<th>Order By</th>
<th>Phone</th>
<th>Email</th>
<th>Message</th>
<th>Date</th>
<th>Status</th>
<th>Options</th>
</tr>
</thead>
</table>
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="tab_2">
<b>Domain Registration</b>
<table class="table" id="domainregistrationTable">
<thead>
<tr>
<th>S.no</th>
<th>Order By</th>
<th>Phone</th>
<th>Email</th>
<th>Message</th>
<th>Date</th>
<th>Status</th>
<th>Options</th>
</tr>
</thead>
</table>
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="tab_3">
<b>Cloud Computing</b>
<table class="table" id="cloudcomputingTable">
<thead>
<tr>
<th>S.no</th>
<th>Order By</th>
<th>Phone</th>
<th>Email</th>
<th>Message</th>
<th>Date</th>
<th>Status</th>
<th>Options</th>
</tr>
</thead>
</table>
</div>
<!-- /.tab-pane -->
<!-- /.tab-pane -->
<div class="tab-pane" id="tab_4">
<b>Android application Development</b>
<table class="table" id="androidappTable">
<thead>
<tr>
<th>S.no</th>
<th>Order By</th>
<th>Phone</th>
<th>Email</th>
<th>Message</th>
<th>Date</th>
<th>Status</th>
<th>Options</th>
</tr>
</thead>
</table>
</div>
<!-- /.tab-pane -->
<!-- /.tab-pane -->
<div class="tab-pane" id="tab_5">
<b>Web Hosting</b>
<table class="table" id="webhostingTable">
<thead>
<tr>
<th>S.no</th>
<th>Order By</th>
<th>Phone</th>
<th>Email</th>
<th>Message</th>
<th>Date</th>
<th>Status</th>
<th>Options</th>
</tr>
</thead>
</table>
</div>
<!-- /.tab-pane -->
<!-- /.tab-pane -->
<div class="tab-pane" id="tab_6">
<b>SEO and Online Marketing</b>
<table class="table" id="seoTable">
<thead>
<tr>
<th>S.no</th>
<th>Order By</th>
<th>Phone</th>
<th>Email</th>
<th>Message</th>
<th>Date</th>
<th>Status</th>
<th>Options</th>
</tr>
</thead>
</table>
</div>
<!-- /.tab-pane -->
</div>
<!-- /.tab-content -->
</div>
<!-- nav-tabs-custom -->
</div>
スクリプト
// global the manage tables
var manageMemberTable;
//var tbl1 = $('#webdesignTable').DataTable( );
$(document).ready(function() {
$('table.display').dataTable(); //focus here
manageMemberTable = $("#webdesignTable").DataTable({
"ajax": "webdesign_action/retrieve.php", //get data for your tables
"order": []
});
domainregistrationTable = $("#domainregistrationTable").DataTable({
"ajax": "domainregistration_action/retrieve.php", //get data for your tables
"order": []
});
//It continues
セレクターを選択します。クラスIには2つ以上のテーブルがあります。すべてのテーマを使用して、すべてのテーマを使用して、すべてのテーブルに設定できます。
<table class="mytable">
<table class="mytable">
...
...
...
次のようなinitテーマ：
$('.mytable').DataTable({
order: [[0, "desc"]],
language: {
"lengthMenu": "نمایش _MENU_ ردیف در هر صفحه",
"zeroRecords": "متاسفیم هیچ کاربری مطابق با اطلاعات درخواست شده یافت نشد",
"info": "نمایش برگه _PAGE_ از _PAGES_ از _TOTAL_ کاربر",
"infoEmpty": "هیچ اطلاعاتی یافت نشد",
"infoFiltered": "(فیلتر شده از _MAX_ کاربر)",
"search": "جستجو:",
"paginate": {
"first": "نخست",
"last": "آخرین",
"next": "بعدی",
"previous": "قبلی"
},
},
})
次のようなHTML
<table id="Table01" class="table"></table>
<table id="Table02" class="table"></table>
<table id="Table03" class="table"></table>
<table id="Table04" class="table"></table>
次のようなスクリプト：
table01 = $("#Table01").DataTable({/* to do somthing... */});
table02 = $("#Table02").DataTable({/* to do somthing... */});
table03 = $("#Table03").DataTable({/* to do somthing... */});
table04 = $("#Table04").DataTable({/* to do somthing... */});
所属していません StackOverflow
