كيف تضع متعددة datatables jQuery في صفحة واحدة؟
https://stackoverflow.com/questions/1790065
-
22-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
أريد استخدام Datatables jQuery لإظهار شيء ما.
إنه يعمل بشكل جيد عندما أضع dataTable في صفحة واحدة ، ثم أضيف واحدة أخرى ، لكنهم احتلوا نفس الموقف تقريبًا ، ولا يعمل أحدهم جيدًا.
هل تعرف كيف تتعامل مع ذلك؟
نصائح أخرى
من الممكن مع معالجة جانب الخادم. لقد عملت في عدد من المواقع في طلبي. تحتاج فقط إلى اتباع رمز المثال لمعالجة جانب الخادم عدة مرات ...
$(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();
} );
سيتم عرض جميع الجداول الثلاثة طالما أنك تعطي الفصل الصحيح
إذا كان لديك بيانات متعددة على الصفحة الواحدة - تحقق مما إذا كنت تستخدم ما يلي من الأمثلة
"fnServerData": fnDataTablesPipeline
هذا يخبؤ البيانات من المكالمة الأولى ؛ إذا كان DataTable الثاني يستخدم نفس الوظيفة ، فسترى أن البيانات قد تم جلبها بالفعل وعدم إجراء مكالمة Ajax لاسترداد بياناتها. وبالتالي لن تتلقى بيانات إلى DataTable الثانية (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
حدد المحدد حسب الفصل لدي جدولين أو أكثر وأريد inter on on shown مع تكوين واحد يمكنك تعيينه لجميع الجدول فئة مثل:
<table class="mytable">
<table class="mytable">
...
...
...
ويبني موضوع مثل:
$('.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... */});
