I'm having a table in my current project and using DataTables to provide search and sort function on this table.
Now, I am adding checkboxes in front of every row, so one can check a row, to later only process checked rows.
What I would love is to be able to click the header (which is a checkbox as well) and then 1. not having a sort function for that column, as well as checking all checkbox when clicking, and unchecking all, if all are ticked already.
So I could do something like use the jQuery selector :checkbox to find the checkboxes and set the property checked to true, then if clicking again, check every if its checked and if yes uncheck them, if not check all, and so on.
But is there a more elegant, respectively a better way to do this? Also, how can I disable the sort, so its not a asc/desc sort icon showing in that column?
See jQuery DataTables Checkboxes plug-in that adds support for checkboxes and "select all" control in the header.
var table = $('#example').DataTable({
'columnDefs': [
{
'targets': 0,
'checkboxes': {
'selectRow': true
}
}
],
'select': {
'style': 'multi'
},
'order': [[1, 'asc']]
});
See this example for code and demonstration.
Related
I have a jqgrid use multiselect: true flag, it shows like the below. Now I want to ask how can I show checkbox in some rows, else hide all. For example, show checkbox in rows have ID includes 44, 40, 32, 26 (all of them passed my conditions), so the rest will be hidden (not passed my conditions).
When I click in the check all in the header, jqgrid needs to selecting row had ID 44, 40, 32, 26 and exclude others.
My conditions have been got from rows object.
Someone, please help me, I have researched for two days but not got any result about that.
You use a very old version and I'm not sure if this is supported. Anyway you can try. In order not to select certain rows with check all box you will need to add a class 'ui-state-disabled' to that row. Usually you can do this two ways:
use rowattr event to do this (this is done only when row is inserted)
if you know the id of the row in the grid
For rowattr event your code can look like this:
$("#grid").jqGrid({
...
rowattr : function( rowData ) {
if( rowData.myfield === "A") {
return { "class": "ui-state-disabled" };
} else {
return {};
}
},
...
});
It is a good to read the docs for this event.
For the second case you will just use jQuery like
$("#my_row_id", "#grid_id").addClass('ui-state-disabled');
I have a grid which is based on jQuery DataTables Checkboxes. It pretty much looks like the basic example that gyrocode have on their webpage
Does anyone know if I can have all checkboxes checked when the table first loads please (including the master checkbox, the one at the top that checks/unchecks all with a single click)
I tried $("input.dt-checkboxes").prop("checked", true); but that checks only the entries that are currently shown on the datatable's page
you can use cells.checkboxes.select(), filter the cells but, but we actually return true for all rows here, a working fiddle:
...
'initComplete': function(settings){
var api = this.api();
api.cells(
api.rows(function(idx, data, node){
return true;
}).indexes(),
0
).checkboxes.select();
},
...
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 need to hide all the checkboxes on a jQgrid and after read this two posts:
Remove the heading checkbox from jqgrid
jqGrid multiselect "check all" in header: how to hide it?
This is what I did:
// this only hides the first checkbox on the header
$('#gbox_grid_notification_queue').find('input[type="checkbox"]').hide();
// this does not hide anything at all
$('#gbox_grid_notification_queue').find('td input[type="checkbox"]').hide();
// this does not hide anything, same as previous one
var grid_notification_queue = $("#grid_notification_queue");
$("#cb_" + grid_notification_queue.id).hide();
What I am missing here?
If you use free jqGrid fork, then the solution would be very easy. You need just add
multiselectPosition: "none"
option to prevent creating checkboxs. It improves additionally the performance of multi-selection. I remind that here you can find different options of free jqGrid, which has relation with selection. The value of multiselectPosition could be "left", "right" or "none".
You can use this code
$("input[type=checkbox]").each(function() {
$(this).hide();
});
Try this:
$('#gbox_grid_notification_queue').find('input[type="checkbox"]').each(function(){
$(this).hide();
});
I have a question regarding jQuery DataTables.I have the following situation , when table is loading everything should be sorted by third column , but at the same time , I sorting by columns should be disabled (when clicking on the header of the table), and highlighting of column on which sorting is done should be also disabled.
Please if you have any idea , share it with me.
Thank You.
SOLUTION
Use order option to define initial sorting along with columnDefs.orderable set to false to disable sorting for specific columns and columnDefs.targets set to _all to target all columns.
var table = $('#example').DataTable({
order: [[2, 'asc']],
columnDefs: [{
targets: "_all",
orderable: false
}]
});
If you don't want the sorted column to be higlighted use the following classes for your table: stripe hover row-border, see the HTML example below:
<table id="example" class="stripe hover row-border" cellspacing="0" width="100%">
DEMO
See this jsFiddle for code and demonstration.