Voglio usare jquery dataTables per mostrare qualcosa.come inserire più dataTable jquery in una pagina?
Funziona bene quando metto solo un dataTable in una pagina, quindi ne aggiungo uno in più, ma occupano quasi la stessa posizione, e uno di essi non funziona bene.
Sai come gestirlo?
E 'possibile con l'elaborazione lato server. Lo faccio funzionare in un certo numero di posizioni nella mia applicazione. Hai solo bisogno di seguire il codice di esempio per l'elaborazione lato server più volte ...
$(document).ready(function() {
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../examples_support/server_processing.php"
});
});
sostituzione #example con #id-of-your-table e "sAjaxSource": "../examples_support/server_processing.php" con "sAjaxSource": "url/to/your/server/side/script".
La mia ipotesi è che tu abbia usato il selettore .dataTable dall'esempio di più tabelle. Quale applicherà la stessa impostazione a tutte le tabelle con la classe dataTable.
Se si dispone di più DataTable sulla singola pagina - verificare se si utilizza il seguente dagli esempi
"fnServerData": fnDataTablesPipeline
questo memorizza nella cache i dati della prima convocazione; se il secondo datatable usa la stessa funzione vedrà che i dati sono già stati recuperati e non effettuare la chiamata ajax per recuperare i suoi dati. e così non riceverai dati per il tuo secondo (nth) datatable.
Sono in ritardo alla festa, ma qui è il metodo che ho finito per usare per risolvere il problema che si descrive ...
$('.testDataTable').each(function() {
var dataSource = $(this).attr("data-ajaxsource");
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": dataSource
});
});
Stai essenzialmente scorrendo le istanze DataTable e aggiungendo la fonte fissato dal un attributo di dati. Se non hai familiarità con gli attributi di dati, sono semplicemente tag applicati ad un elemento ...
<div id="testDataTable" data-ajaxsource="http://myserver.com/json"></div>
alternativa, Se non si desidera utilizzare gli attributi dei dati HTML5, è possibile utilizzare un campo nascosto all'interno del genitore che potrebbe essere letto direttamente nella 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();
});
Tutti e tre i tavoli sarà visualizzata finché si dà la classe giusta
ancora lavorando ... ma questo potrebbe essere utile
<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>
Lo script
// 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
Mi dispiace tanto, trascuro la documentazione lì. Ma grazie. :) –
Non funziona con i dati lato server. –
Forse sono fitto, ma come è questo documento che descrive come abilitare il rendering di più tabelle? – Derek