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.
Related
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;
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
I use grid with DataTables component.
I want to switch between two grid.
the second one is hidden at startup.
when I show the hidden grid, columns headers are not aligned with columns values
like this
you can see here in live
you can change the showed grid with radio at the top
an idea ?
An idea which correct your display error but which is not really attractive :
The idea is that your display became correct after sorting of a column so you can bypass it by adding myTable.fnSort([[0, 'asc']]); (sort first column by ascending order) after your datatable is initialized.
See here
A little more information would be helpful, but your jquery is not formatting your headers. show some more code or format them manually or get jquery to quit being that way. possibly a way to trick jquery would be to have those headers visible the whole time, but have your text font equal to your background and change the font color when it comes time
jQuery DataTables does not properly align columns and headers when the table is hidden. Temporarily show the table while applying dataTables to it:
$(document).ready(function() {
Table1 = $('#Table1').dataTable({
"bSort": false,
"sScrollY": "400px",
"bJQueryUI": true,
"bPaginate": false
});
$('#Table1Container').hide();
$('#Table2Container').show();
Table2 = $('#Table2').dataTable({
"bSort": false,
"sScrollY": "400px",
"bJQueryUI": true,
"bPaginate": false
});
$('#Table2Container').hide();
$('#Table1Container').show();
$("#rdTable1").click(function() {
$('#Table2Container').hide();
$('#Table1Container').show();
});
$("#rdTable2").click(function() {
$('#Table1Container').hide();
$('#Table2Container').show();
});
});
Since DataTables 1.10, this issue can be resolved by calling the columns.adjust() method when you show your table.
I am using Datatables grid in one of my application because it has a relatively exhaustive API for event dispatching and customization . But I am facing a problem now , the grid's height depends on the number of records to be displayed . How can I customize it so that it maintains the height even if records are deleted and continue to show empty cells from where the record was deleted ? Thanks .
Is there any better grid plugin than datatables which provides the features supported by datatables and where I would not face such problem .
You can add this into your table initialisation like so:
$(document).ready(function() {
$('#example').dataTable( {
"sScrollY": "200px",
"bPaginate": false,
"bScrollCollapse": false
} );
} );
Where the sScrollY value will define the constant height of the table and bScrollCollapse set false will prevent the table from shrinking to fill empty cells.
You need to modify the CSS in order to achieve that. Other option is jqGrid.
http://www.trirand.com/blog/jqgrid/jqgrid.html
I want to remove the paging buttons on the grid, but I want to keep the add, edit, refresh, etc buttons on the bottom left. I don't want the pager there because I will be displaying all records in this particular grid implementation.
I want to keep what is in GREEN but remove what is in RED:
Currently, my solution is to empty out the center of the grid's navigation
$('#pager_center').empty();
But this means that the pager renders to the page, and then gets emptied, I'm wondering if I can just prevent it from even being rendered in the first place.
You can use my following JqGrid option to disable RED zone from JqGrid. It should be the best way to solve this question because you don't need to hack JqGrid rendering via CSS style sheet that be caused of problem if JqGrid change pattern for generating pager or you change pager id.
$('#grid').jqGrid
({
rowList: [], // disable page size dropdown
pgbuttons: false, // disable page control like next, back button
pgtext: null, // disable pager text like 'Page 0 of 10'
viewrecords: false // disable current view record text like 'View 1-10 of 100'
});
You could apply a CSS style to hide it...?
#pager1_center {
visibility: hidden;
}
There are also options like pgbuttons and recordtext that settings in the init might cause that part not to render any HTML.
jQuery("#grid_id").jqGrid({pgbuttons:false, recordtext: ''});
Using this will remove the paging/view records area with buttons and everything.
jQuery("#WebsitesGrid").jqGrid({
...
pginput: false,
pgbuttons: false,
viewrecords: false,
....
Or if you would like to have more space in the footer of your jqGrid, you can simply hide desired part of
navigation.
gridComplete: function()
{
$( '#' + gridId + 'Pager_center' ).hide();
$( '#' + gridId + 'Pager_left' ).hide();
},
where gridId is id of your jqGrid.
$('#grid').jqGrid({pgbuttons:false, recordtext:'', pgtext:'')}
If you're looking for a solution to avoid Pager in jqGrid then just add following code in loadcomplete callback or as a statement after your jqgrid call, with or without #Soul_Master's solution,
$("#divPager").css({ "height": "0px", "border": "0px" });
It worked for me.
even you can set align property of pager details like no of records dropdown, pager text, record text. to acheive this need to change pagerpos and recordpos to right or left or center as we required. Details has to be updated in jquery.jqGrid.min.js or just do search for these keywords in your js files and do the update.