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();
},
...
Related
After a lot of search in SO without any particular solution, I am compelled to ask this question.
In Simple words - I want to collapse or hide a specific row using Javascript in ag-grid. I have tried several methods explained in ag-grid documentation and also in SO, but none has worked till now.
All the following methods have been tried and none of the codes worked.
Let rowNode = gridOptions.api.getRowNode(params.value);
Method #1. params.api.getDisplayedRowAtIndex(2).setExpanded(false);
Method #2. params.api.getRowNode(params.value).setExpanded(false);
Method #3. gridOptions.api.setRowNodeExpanded(rowNode,false);
Method #4. gridOptions.api.getRowNode(rowId).style.visibility = "collapse";
I have also tried using plain CSS, like this - Data has disappeared but the white blank row is visible
rowNode.setDataValue('class', 'hidden'); //Where “class” is a field
const gridOptions = {
//Other grid options...
getRowClass: params => {
if (params.data.class === "hidden") {
return 'hidden';
}
},
https://stackblitz.com/edit/js-nvtqhz?file=infoCellRenderer.js
setExpand / setRowNode Expanded only works on collapsible rows, i.e it will collapse an expanded row. it will not hide it.
I edited your stackblitz,
I made a couple of changes to make it work.
Selectable Rows
So, when you click a row, I'm marking it as selected. There is a property on ag-grid rowSelection: 'single' | 'multiple. If you want to hide only one row at a time, use 'single' if you can hide multiple rows use 'multiple'
External filtering
So, ag grid can filters rows if we provide a criteria.It can be a check on any of data property as well. For your problem, I have added a filter that says if any row is selected, remove it from the grid.
Following are the changes
/// method called on clicking the button
function hideRow(params) {
let rowNode = gridOptions.api.getRowNode(params.value); // get the clicked row
rowNode.setSelected(true); //mark as selected
gridOptions.api.onFilterChanged(); // trigger filter change
}
Triggering the filter change will call this method for each row
function doesExternalFilterPass(node) {
return !node.selected; // if row node is selected dont show it on grid.
}
You can access the rows hidden any time using
gridOptions.api.getSelectedRows() //Returns an array of data from the selected rows. OR
gridOptions.api.getSelectedNodes() //Returns an array of the selected nodes.
And, if you want to show a row again, just filter from this above mentioned method and do these steps
rowNode.setSelected(false); //mark as unselected
gridOptions.api.onFilterChanged(); // trigger filter change
This will automatically show the row on grid.
Hope this helps! :)
I work wit library datatables, and i want to add in table row check box for some actions, i add checkboxes to the table,and one check box in table header for choose all boxes.
Script:
$('#checkAll').click(function () {
$(':checkbox.checkbox-mark').prop('checked', this.checked);
});
In jsfiddle you can see more.
But problem is, i have pages, and in case if i tap on header checkbox, it's choose only all boxes in curent page, but i want in the all pages, how i can solve this?
like you discussed already you can use service/api to set selectAll values but if you want to it using front end then you can use DataTable().cells().nodes(); to get all the nodes and iterate through them and set the checkbox value to each node.
// update your checkAll logic like this
$('#checkAll').click(function() {
var allPagesData = $("#test1").DataTable().cells().nodes(); // this will give you all data in datatable.
$(allPagesData).find('input[type="checkbox"]').prop('checked', this.checked);
});
check out this fiddle
I have an array of checkboxes all with the same names which I submit to a Spring Boot Controller. I build a Bootstrap DataTable using Jquery/Ajax using data which receive from the database and test if I should select the checkbox when the page loads. I do this by using this code:
if (data['isChecked'] == "1") {
return "<input type='checkbox' name='fieldIdList' value='1_' checked>";
} else {
return "<input type='checkbox' name='fieldIdList' value='1_'>";
}
This code loops, so the next checkbox value will be 2_ and the next 3_, etc, etc.
When the page loads the table displays 10 rows and my first 2 checkboxes are shown as selected. This is correct.
Now when I submit this form without changing the state of any of the checkboxes to my Controller code below:
#RequestMapping(value = "/admin/dataTable", method = RequestMethod.POST)
public String postDataTable(#RequestParam("fieldIdList") List<String> fieldIdList){
return "";
}
I get 2 entries in my fieldIdList:
"1_"
"2_"
This is correct because only my first 2 checkboxes was checked. But when I uncheck any of the checkboxes and submit again, I get a funny result. In the example below, I unchecked the 2nd checkbox and then submitted the form again, my entries in my fieldIdList:
"1_"
"1_"
"1_"
"2_"
By unchecking the second checkbox and submitting, I suspected to get only 1 entry in my fieldIdList as "1_"
Also after I submit, the page is redirected the the previous page, so when I enter this page again, all the Lists are loaded as new, so there can be no previous values still stored in them.
Not sure if this is a Jquery/Ajax issue or Java issue or just a problem with the object between the chair and laptop :)
Because the DataTable is paging, I had to add this piece of code below in order to get all the rows of the DataTable. Not sure if this is causing the issue.
// Handle form submission event
$('#manageFormFields').on('submit', function (e) {
var dataTable = $('#formFieldsDataTable').DataTable();
var form = this;
// Iterate over all checkboxes in the table
var tableData = dataTable.$('input, select').serializeArray();
$(form).append(tableData);
$.each(tableData, function () {
// If element doesn't exist in DOM
if (!$.contains(document, form[this.name])) {
// Create a hidden element
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', this.name)
.val(this.value)
);
}
});
});
The generated HTML:
Thank you for your time.
I am truly sorry for wasting your time.
It turns out I was adding the list of rows twice to the Datatable. Thus there were 2 fields with the same name and value. When I uncheck the one, the other one is still present and that is why the controller still picked it up.
I could not see this in the HTML output because the source only shows what is visible on screen(the first 10 rows).
So when I paged through all the rows I noticed another checkbox was checked and then saw that I added the rows twice.
Removing the duplicates fixed my problem.
Thank you!!
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 would explain the functionality of the jquery plugin myself but the website definitely does it better than what I can, it seems quite a simple plugin for the most part
http://tablesorter.com/docs/
I'm using this plug to filter my tables after they are generated, works fine. The issue is that the table is live updating and after table is filtered, if a new update is received and then you filter the table again, the data duplicates.
I have been looking in to it a lot, it seems the plugin builds up a cache of the information which allows the data to be filtered.
What I'd like to do is to delete the cache and rebuild it everytime there is an update, preventing duplicate information from being appended to the table array.
client javascript:
function appendTables(appendData, index) {
var tabPage = "#tabpage_"+index+" > #myJobs_"+index+" > .userJobs";
userJobsElement = $(tabPage);
userJobsElement.empty();
userJobsElement.append(appendData);
applySortTable();
}
this part generates multiple tables using a dynamic id as well as 2 standard tables:
function applySortTable() {
var tables = $('table');
tableCount = tables.length-2;
$("#myJobs_all").tablesorter();
$("#myJobs_noteam").tablesorter();
for (var i = 0; i < tableCount; i++){
$("#myJobs_"+ i).tablesorter();
}
the table is then generated using the plugin and as I said creates a cache, does anyone know how to clear the cache then have it rebuild for when this happens to a user?
update
the updating of the data is now working but currently we have setup a tab based table system to view different team information. when the update is processed, the table is then only updated in the first table and the other tables stop working, anyone know how to handle this?
Re-initializing the tablesorter plugin is not the correct method. After adding new content, simply trigger the update method:
$("table tbody")
.append(appendData)
.trigger('update'); // this event will bubble up
Check out this demo's code example