Как разместить несколько данных jQuery на одну страницу?
https://stackoverflow.com/questions/1790065
-
22-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я хочу использовать DataTables jQuery, чтобы что -то показать.
Это работает хорошо, когда я просто помещаю один данные на одну страницу, затем я добавляю еще одну, но они занимали почти одинаковую позицию, и один из них не работает хорошо.
Вы знаете, как с этим справиться?
Другие советы
Это возможно при обработке на стороне сервера. Я работаю в ряде мест в моем приложении. Вам просто нужно следовать примеру кода для обработки на стороне сервера несколько раз ...
$(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
});
});
Вы, по сути, итерация через свои экземпляры DataTable и добавляете исходный набор атрибутом данных. Если вы не знакомы с атрибутами данных, это просто теги, применяемые к элементу ...
<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 для извлечения своих данных. И поэтому вы не будете получать данные во второй (NTH) DataTable.
Все еще работаю над этим ... но это может быть полезно
<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
Выберите селектор по классу, у меня есть две или более таблицы, и я хочу init off Off Theme с одной конфигурацией, которую вы можете установить для всех таблиц, например:
<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... */});
