I have a DataTable with pagination enabled and I need to disable this setting and show all the results without pager by pressing a button.
I'm trying to access the already defined settings, change the paging to false, and redraw the table, but it doesn't work. I searched and tried similar forum threads without success.
Any idea how can I achieve that?
Here's a demo with my not-working code
HTML:
<div id="main_wrapper">
<button class="form_button destroy_pager" type="button" onclick="" title="Destroy pager">Destroy pager</button>
<table id="example" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>
</div>
jQuery:
$(document).ready(function() {
var oTable = $('#example').DataTable({
'bPaginate': true,
'iDisplayLength': 5
});
$('button.destroy_pager').on('click', function() {
var oSettings = oTable.settings;
oSettings.bPaginate = false;
oTable.draw();
});
});
EDIT: I need to have the pager enabled when I initialise the DataTable. The problem is that I have to disable it after the button press.
Thanks in advance
I have a DataTable with pagination enabled and I need to disable this setting and show all the results without pager by pressing a button.
I'm trying to access the already defined settings, change the paging to false, and redraw the table, but it doesn't work. I searched and tried similar forum threads without success.
Any idea how can I achieve that?
Here's a demo with my not-working code
HTML:
<div id="main_wrapper">
<button class="form_button destroy_pager" type="button" onclick="" title="Destroy pager">Destroy pager</button>
<table id="example" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>
</div>
jQuery:
$(document).ready(function() {
var oTable = $('#example').DataTable({
'bPaginate': true,
'iDisplayLength': 5
});
$('button.destroy_pager').on('click', function() {
var oSettings = oTable.settings;
oSettings.bPaginate = false;
oTable.draw();
});
});
EDIT: I need to have the pager enabled when I initialise the DataTable. The problem is that I have to disable it after the button press.
Thanks in advance
Share Improve this question edited May 8, 2015 at 7:49 chimos asked May 7, 2015 at 14:37 chimoschimos 6642 gold badges15 silver badges35 bronze badges4 Answers
Reset to default 4You should destroy and reinitilize the datatable with bPaginate option set to false on button click
$(document).ready(function() {
var table = $('#example');
var tableOptions = {
'bPaginate': true,
'iDisplayLength': 5
};
table.DataTable(tableOptions);
$('button.destroy_pager').on('click', function() {
table.DataTable().destroy()
tableOptions.bPaginate = false;
table.DataTable(tableOptions);
});
});
demo
Use sDom option. Try sDom: 'ft' option. It's work for me.
Take a look here: http://datatables/usage/options#sDom
i have an idea to preparing table style before set row number per page. but this make me wondering how datatable api store elements style. if i can set table style and declaring datatable object in the same time. it will make my code more performance
$('#example').DataTable({
'bPaginate': false
});
use the above code.
jsFiddle