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
Related
Note: Among the obvious (DataTables, jQuery) I am using..
jquery-datatables-checkboxes/1.2.9/css/dataTables.checkboxes.css
jquery-datatables-checkboxes/1.2.9/js/dataTables.checkboxes.min.js
select/1.2.5/css/select.dataTables.min.css
select/1.2.5/js/dataTables.select.min.js
And using a live API call to populate my tables.
As described in the title, all other saveStates seem to be functioning as they should in localStorage (paging, ordering, etc), after a hard refresh on my datatable.
With checkboxes, I've gotten them to remain in a semi-saved state, meaning if I refresh they stay, but after a cache refresh (ctrl+f5), they are gone.
I'm assuming this has something to do with the stateSaveCallback and stateLoadCallback.. and there are also some things such as StateLoaded, StateLoadParams, StateSaveParams in the dataTables stateSave documentation.
Here is my Datatable Initalization at the bottom of my page.
<script>
$(document).ready(function (){
var table = $('#example').DataTable({
'columnDefs': [
{
'targets': 0,
className: 'select-checkbox',
'checkboxes': {
'selectRow': true
}
}
],
'select': {
style: 'multi+shift',
selector: 'td:first-child'
},
'order': [[1, 'asc']],
'paging': false,
'stateSave': true,
'stateSaveCallback': function(settings,data) {
localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) )
},
'stateLoadCallback': function(settings) {
return JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) )
}
});
});
</script>
The PHP and HTML seem to be working and populating fine, so I don't think posting the full script is necessary, but here is the checkbox portion and a glance
// getting the variables from the API call
$results .= "<tr><td>$rowCount</td><td><img src=\"$largepic\" style=\"width:225px;height:auto;\"> . . . . .
I am using is the gyroscope datatables checkboxes plug-in, which requires a custom id (hence $rowCount which is just an $i++ increment a for each loop.
But as stated, stateSave is working fine for all other elements. Checkboxes and other inputs are apparently a special breed?
And honestly I tried many things, but most either worked strangely or broke the script. The initialization above is actually the best I could get it. I would post a demo but because it's an API initialization I can't do so.
Anyone, please, have been through this or have an idea of what I can do?
This seems to be a common problem, with stateSaving through elements like this. Checkboxes, drop-downs. I'm assuming the checkboxes need to be held in localStorage properly and once again retrieved, but a solution is hard to sculpt for me and there is little information that I've found that directly addresses this.
The Gyrocode DataTables CheckBox plug-in is actually pretty well documented, and illustrates examples of stateSave and keepConditions on their site, but all has fallen short thus far. It probably has something to do with how I am retrieving the data and needing a special condition to retrieve it. That is my best guess thus far.
Looking through the gyroscope examples, I see a method he is using to capture the checkbox data in datatables
var rows_selected = table.column(0).checkboxes.selected();
// Iterate over all selected checkboxes
$.each(rows_selected, function(index, rowId){
// Create a hidden element
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', 'id[]')
.val(rowId)
);
});
So this illustrates getting the checkbox data through datatables -- in this example through a form submit.
What am I missing that will persist the checkboxes like the other elements alongside it?
I am using the latest dataTables as of 4/02/2018, v1.10.16.
There has been a bug corrected in the jQuery DataTables Checkboxes plug-in in version 1.10.11 that prevented proper state saving on subsequent page reloads, see this issue #64.
Use the latest release and the problem with state saving should go away.
I'm using the tablesorter plugin and tablesorter widgets for searching through the items in a table. however i had a conflict with the tablesorterWidgets.js file while trying to set the number of rows per page.
js:
var $table = $("#table").tablesorter({
widgets: ['zebra', 'columns', 'filter'],
widthFixed : true,
ignoreCase: true,
widgetOptions : {
filter_columnFilters: false
}
//used for searching specific items in the table
$.tablesorter.filter.bindSearch( $table, $('input.search-sub-accounts'));
items = $("table tbody tr");
perPage = 2;
numItems = items.length;
items.slice(perPage).hide();
However it never took the perPage number coz at some point in tablesorter widgets file, it overwrites the perPage number and resets it back to the original length of the items.
is there any other way i could use to search the items from the input field.
http://jsfiddle.net/anLa1how/5/
Thanks!
Looking through the documentation, it looks like you have few issues.
Working jsFiddle demonstrating the below fixes
Issue 1:
You are using tablesorter.js Version 2.0.5b with tablesorter.widgets.js v2.23.3
You should instead use the newest version of each: tablesorter.js v2.23.3 and tablesorter.widgets.js v2.23.3
Issue 2:
The introduction states:
tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. It has many useful features including:
Your table does not have THEAD or TBODY tags which are required. If none are detected the tablesorter is not initialized and therefore the widgets cannot be created causing these errors to appear in the console:
Uncaught TypeError: Cannot read property 'resizableNoSelect' of undefined
Uncaught TypeError: Cannot read property 'widgetOptions' of undefined
Issue 3:
Per the documentation for $.tablesorter.filter.bindSearch
Include a data-column="#" attribute (where # is the column number) in the search input, to specify to which column the search should apply ~ see this demo for a full example. Warning!, if no data-column attribute is added to the input, the input will be ignored.
In v2.15, use a data-column="all" to bind an external any-match search filter....
This means that where you have <input class="search-items"/> it should be more like <input class="search-items" type="search" placeholder="Search" data-column="all"> (change "all" to a column number if needed)
Issue 4:
As you mentioned, the filter widget seems to be overriding the pagination settings. A quick way to get around that would be to move the call to hide elements into the onInit: callback and put it inside a timer function so it lets the filter plugin do its thing first then hides the other "pages". Like this:
setTimeout(function(){ items.hide().slice(startItem - 1, endItem).show();}, 100);
This might not be the best way but without getting too deep into the widgets, this does work.
I am trying to add some column header groups with sub columns in ExtJs, however I am having some difficulty...
I know that when we specify the config for a gridpanel, we can use a tree like structure to specify columns with sub groups i.e.
columns[{
text: 'column1',
columns[{
text: 'subcolumn'
}]
}}
This is fine, however, I am trying to do this dynamically when my gridpanel store loads
I have some code which creates a grid column on the fly
retCol = new Ext.grid.column.Column({
fixed: false,
hideable: false,
menuDisabled: true,
draggable: false,
sortable: false,
align: 'center',
text: monthName,
columns: []
});
The problem is, the newly created doesn't seem to have the value for columns that I supplied, it is hidden away in the initialConfig but it is of no use there :-/
Seen as this code creates the column header, if we don't have an array of columns, there is no way of adding sub columns. I tried adding to the 'items' config, but that doesn't work either :-/
Thanks for any help in Advance
Baz
If you want to add columns after the grid has been rendered you can use the grid reconfigure method.
I just read your question again, the reconfigure will also expect you the give your column config in the structure you posted. Not with the dynamically created headers.
You can build your column config dynamically though, after your store has loaded and pass the new config through reconfigure to your grid.
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 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.