Allow forms to submit data in off-paged data
Allow forms to submit data in off-paged data
SujaySarma
Posts: 2Questions: 1Answers: 0
Here is what I am trying to do:
I have a tabular display. I am using the DataTables system purely for its automatic pagination and "Search" feature. I don't have any plugins installed. Just what comes from the main .js and .css files.
Scenario: I am showing a list of active users in a section of the system. Table contains each user's name, email address, title and department. All of these are simple text columns. The very first column of each row [except the header row] in the table is a simple HTML input checkbox. The user checks a set of boxes to select particular users and then clicks a button at the top of the page [let's say "Deactivate users"].
The system has upwards of 200 users (so even at 100 per page, you will get multiple pages). Now, when the user checks the boxes on or off and then moves to different pages, the checkboxes remain checked on/off. BUT! But, when the page is posted, the values from checkboxes that were not on the active page when the form POST happened don't get sent to the server.
So, the question is, what options do I set or configure to let the web browser pick up the states/values of the checkboxes from the table pages that are not currently visible when the form was posted?
Repro as points:
1. Have (say) 20 rows of data
2. Load them onto a simple HTML table, all normal text columns "<td>foo</td>"
3. Add a form and a submit button to post data to some server side script
4. Add a column to the HTML table and set each row to a simple HTML input type="checkbox", set a unique value for each row to be able to identify which row it came from.
5. Run the page, check boxes and submit, ensure that the server side script sees all the checked rows correctly.
6. Attach DataTables to the HTML table without any options (just defaults)
7. Set page size to 10 rows - so now you get 2 pages
8. Check boxes on one page and submit while on that page -- your script will see all the checkboxes from that page.
9. Check boxes on one page, switch to another table page and then submit -- your script will see NOTHING.
10. Now check boxes on page 1 and page 2, move to page 1 and submit - your script will see only data from Page 1.
Help!!
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
@colin: I think you have misread my post. My issue is with getting the data on the SERVER side and not the client side. Any repro I create for you can only show you the client side.
This would be a client side issue. The problem is, unless we see your setup, either a link to your page or a stripped down test case, we'd be guessing at your format and structure which isn't a good use of our time.
Colin
I have exactly the same problem and would be very interested in suggestions for a solution as well!
I've been able to solve this with a combination of https://www.gyrocode.com/projects/jquery-datatables-checkboxes/ and the Select extension for DataTables.
Not sure I totally understand the question but assume the problem is due to the way Datatables handles the DOM. The only table rows available in the DOM are the page being displayed. In order to keep track of checkboxes across pages you will need to use Datatables API's to update its data cache with the checkbox state.
Here is a checkbox example that shows how to update the Datatables cache with the checkbox state and how to get the checked rows via Datatables API's. It also shows that using something like jQuery to get checked rows across pages doesn't work.
http://live.datatables.net/cubefaqa/1/edit
HTH,
Kevin
I forgot to mention that the Select Extension is another option for this. You can use checkboxes as shown in this example. This example shows how to use the API to get the selected rows. This will work across pages without you having to code anything.
Kevin