is there a way to iniate a table with dataTable paginating beaultiful as it always does,
and then after the dom is loaded, trigger an event (click for isntance) and remove the paginate? In other words, put all the records in the table again.
UPDATED
$('.dynamicTable').dataTable({
"sPaginationType": "bootstrap",
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
}
});
i have this code above, with 120 rows coming from my php. Naturally the dataTable paginate it every 10 rows, so 12 pages. I want to iniate my DOM with dataTable paginating normally, but then, after i click in a button, it disable dataTable's paginate; in other words, show all my records in 'one page'. I am not sure i have described it well, anybody can understand me? hehe Thanks.
two methods will help in showing all records in datatables:
iDisplayLength is the initial legth shown on the datatable
aLengthMenu is the choices that a user can have in the show [#] entries menu item
so for your code add these to have an initial display length of 15, with options of 15, 25, 50 or All entires
$('.dynamicTable').dataTable({
"sPaginationType": "bootstrap",
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"iDisplayLength": 15,
"aLengthMenu": [[15, 25, 50, -1], [15, 25, 50, "All"]]
});
play with the numbers to your application needs to see what works best
aLengthMenu documentation http://www.datatables.net/examples/advanced_init/length_menu.html
Related
I am ordering the column headers when the data table loads through the colReorder attribute.
var table = $("table#"+id+".data-table").DataTable({
"pagingType": "full_numbers",
"pageLength": 25,
"aaSorting": [],
"colReorder": true,
"colReorder": {
"order": gon.table_ids[id].order
},
"responsive": true});
However, I don't want the user to have the ability to move the columns around. I just want the datatable to load my predefined column order and that is it. Currently, after datatables moves my columns around, the user is allowed to move the columns but I want it disabled. Anyway this is possible?
I create a dataTable with infinite scrolling as
$('#table1').dataTable({
'aaData' : dataArr,
'aoColumns': columnArr,
'bScrollInfinite': true,
'bColumnCollapse': true,
'sScrollY': '200px',
'iDisplayLength': 20,
'bAutoWidth': false
});
Now when this is loaded, it has message "Showing 1 - 20 of 1000".
In the chrome inspector, I can see only 20 rows in the table. Rest become available only after scrolling to the bottom of table, the other rows appear in DOM.
Is there a way we can make all the rows appear in DOM without srolling?
http://legacy.datatables.net/usage/options
add another property called :
'iDisplayLength ' : 1000
not sure what will display all results for you when results will be more than 1000, but you can try passing 0 or -1, it should probably work.
if not, just insert int.max value.
Just started using DataTables.js the other day and I'm wondering if you can give specific elements on the table custom id/class/name values. For example I've changed the text on the "Search" feature at the top of the table, however now I'd like to give the input box a specific id.
Here is my current attempt.
jQuery
$("#thetable").dataTable({
"sPaginationType": "full_numbers",
"iDisplayLength": 100,
"oLanguage": {
"sSearch": "Filter results:"
}
});
$.fn.dataTableExt.oJUIClasses["sFilter"] = "my-style-class";
Rendered HTML
$('#thetable_filter input').attr('id', 'myId');
I need two different things to happen to this Datatable:
One: I need to add the From and To datepicker inputs to the header of my Datatable, with bJQueryUI included. I found this discussion, http://datatables.net/forums/discussion/comment/16235 but as you can see in my fiddle my inputs are still not being added to the header. Example code below as well.
Two: When clicking inside these inputs, the datepicker widget shows and allows you to pick a date. I need to filter the table between specific dates. As you can see in this example I have October 1-7 included, but maybe I want to filter it between October 4-6. So, on change of the To input, the table should filter accordingly. Any ideas? Thanks in advance.
http://jsfiddle.net/BWCBX/24/
jQuery
$('#example').dataTable({
"sDom": 'R<C><"process_status">T<"clear"><"ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aLengthMenu": [
[5, 10, 15, 20, -1],
[5, 10, 15, 20, "All"]
],
"iDisplayLength": 10
});
$(".process_status").html("From <input type='text' class='datepick' /> <span class='icoMoon icon-calendar-10 icon-set delBlue' title='Revert'></span> To <input type='text' class='datepick' /> <span class='icoMoon icon-calendar-13 icon-set delBlue' title='Revert'></span>");
You can use my Yet Another DataTables Column Filter - (yadcf) plugin,
use the filter_type attribute like this:
filter_type: "range_date"
Also check the date_format attribute in case that you want a date format different than the default one mm/dd/yyyy
Alright Ill try to be as articulate as I can. I am using dataTables 1.9.4 and I am working with a table that I would like to have be a specific height, in this table I have 5 columns 2 of which are hidden columns, while the other 3 are visible.
That said in one of the 3 columns I two div elements one that is just plain text version of what I want users to be able to edit. Where when they click on that name/title to edit it, that div hides and the other one in the same column shows. The one showing has an input element and a link that says cancel. If cancel is clicked then the reverse happens the now hidden shows and the visible hides.
Everything works as expected so no real problems with any of that. The problem is it appears something to do with one or more of the following being set in the datatables api.
sScrollY, bAutoWidth, and a maybe a few others. cause the columns to resize when i hide/show the divs respectively in any given row, if the overall data in the column is larger than what was originally there hiding. Either way I have found that setting sScrollY is the main culprit if I let the table just be whatever size it wants to be height wise. Then the table won't try to auto correct its width per column every "re-draw"
Or I could remove the input field, though that goes against the spec of whats wanted/needed.
So my overall question is, after trying to set/unset, play with and tweak each setting of the api I use for this table. Is, is there anything.. I can do to keep the height set for the overall table while offering an inline element?
var oTable = $('#the_table').dataTable({
//"sPaginationType": "full_numbers",
"bPaginate": false,
"bFilter": false,
"bAutoWidth": false,
//"sScrollY": "200px",
"bScrollCollapse": true,
"aaSorting": [[1,'desc'],[0,'desc']],
"oLanguage": {
//"sInfo": 'Tasks: _END_',
//"sInfoEmpty": 'No Job/Task(s).',
"sInfo": '',
"sInfoEmpty": '',
"sEmptyTable": ' ',
},
"aoColumns": [
{ "bSortable": true, "bVisible": false, "iDataSort": 0, "aTargets": [ 2 ]},
{ "bSortable": true, "bVisible": false},
{ "bSortable": false, "sWidth":"67%", "sClass":"hide_overflow"},
{ "bSortable": false, "sWidth":"30%"},
{ "bSortable": false, "sWidth":"3%", "sClass":"rgt"}
]
});
return oTable;