Topic: Data table, not all values submitting to server
Expected behavior All table inputs are submitted with their values to the server Actual behavior If the table has pagination and you have a checkbox on each row to be submitted with value/pairs, if all the rows are not displaying on the page then you get null values submitted in the records that were not visible (on other pages in the pagination) posted to the server.
Is there a way to post all the values without having to show all the records, otherwise pagination can't be used when posting values from the table?
Regards Shaun Resources (screenshots, code snippets etc.)
You have to check that on clicking the checkbox you properly select/deselect the datatable row:
var table = $('#yourDatatable');
// bind the click event on the table instead of the lines if you want to add
// more lines dynamically
table.on('click', '.someCheckboxClass', function(){
var row = $(this).closest('tr');
var node = table.row( row ).node();
if(table.row( row, { selected: true } ).any() ){
table.row( row ).deselect();
// maybe you have to remove pointer events from mdb-checkbox
// and toggle the state from here, depends on what exactly you do
// $(node).find('input:checkbox').removeAttr('checked');
} else {
table.row( row ).select();
// $(node).find('input:checkbox').attr('checked', 'checked');
}
});
Then you can simply loop through all selected rows in your submit event:
table.rows({ selected: true }).each(function(){
// collect your data for submit
});
// submit data after looping all selected rows and preparing data
That way you also loop through all rows which are currently not visible on your page or hidden by a search filter, etc.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.10.1
- Device: laptop
- Browser: chrome
- OS: windows 8
- Provided sample code: No
- Provided link: No
Grzegorz Bujański staff commented 5 years ago
Hi. if I understand correctly, first You add a new row, then select the check box for the row you want to submit, and then save only the selected row to the database? It looks like a back-end and post method problem. Show me your code, where you catch selected rows and submit to server.
needledrag commented 5 years ago
Hi, no, if I have a data table and show all the rows on the page and post it to the server all the values are there, however if I have the data split into pages using the MD data table, I check boxes across different pages (in the table) and then post the data only the page of data that I'm currently on is posted with values, the rest are all null or empty values so for some reason the data isn't available to be posted when using pagination? Is there a JavaScript property or method of the data table to call before posting back data?
Many thanks Shaun
Grzegorz Bujański staff commented 5 years ago
When You use pagination and change page, rows is remount in DOM. For example - if you switch page 1 to page 2 - Page 1 data will be removed from DOM, and page 2 data will be mounted to DOM. I thing this is problem. You try catch and post DOM element thats didn't exist on DOM. Thats why you get null or empty value. Try catch element, when you select it, and add it to array. When you submit - post array elements
needledrag commented 5 years ago
I think you're right.Is there any way to intercept the loading or unloading of the DOM? Or to load the entire DOM before a post back? Adding to an array would mean I'd have to add everything to the array because I'd need to know if the value has been unselected too. Any property or method of the data table that does this? Or can I just access the DOM the normal way?
Thanks for your help Shaun
Grzegorz Bujański staff commented 5 years ago
You can access to the DOM the normal way and do what you need.