Proper Loading and Draw of DataTable
Proper Loading and Draw of DataTable
![Larry27](https://secure.gravatar.com/avatar/3936a45990f6ce8aa00669ace9e85113/?default=https%3A%2F%2Fvanillicon.com%2F3936a45990f6ce8aa00669ace9e85113_200.png&rating=g&size=120)
https://www.baldwinproject.ca/app/sched40-ws-sql.php
https://debug.datatables.net/umapiw
Seems to be an Ajax Error
It appears my code to load the table is partially working, as you can see when you load the sample page above. However, it doesn't seem to load all components. The search pane doesn't populate, and the pagination doesn't work, nor does the built-in searchbox.
Also, once I initially load data, I am trying to reloading different data, based on the users selection in the select box. That does generate my data, but doesn't seem to completely load all related features, just as the initial load. At the moment I am only concerned about the function select box, but later I will also try to integrate the year select box.
Any help you can offer, would be greatly appreciated.
Thanks,
Larry
This question has accepted answers - jump to:
Answers
Hi Larry,
You have server-side processing enabled. That means that the server side script is responsible for all search and sort, as well as getting the current page of data. If you have this mode enabled, you need to implement server-side processing per this documentation. The logic for SearchPanes also needs to be implemented.
Our Editor PHP libraries can be used to do that, as they have server-side processing support built in. You don't say in your post, but it is possible you are using those libraries already? Normally the Editor libraries are setup to expect POST data (in the
->process()
method call). You are currently sending a GET, so either change the request to be a POST (see this example, or change the->process()
call to use$_GET
.One other thing - you've loaded both
jquery.dataTables.min.css
anddataTables.bootstrap5.css
. That's why the paging control looks odd. You should load only one of those two files.Allan
Hi Allan,
I've fixed the issue with the paging controls, and I have changed back to client-side, so my searchpanes are working properly also.
My one remaining issue is that I cannot figure out where to put reload() and draw() in my function which triggers when a user changes the value in a select box.
Any help you can offer would be greatly appreciated. This is my code;
What I would suggest doing is changing your code a little so you only initialise the DataTable once. Then use
ajax.data
to send the request to the server with the selected value. All that is needed then is to callajax.reload()
.Here is a little update:
I'm not entirely sure what the
change
event handler is doing, but I've matched that logic and just changed the DataTables part.Allan
Thanks for your help so far Allan, I feel like I am making some progress.
I still have 2 remaining issues;
Your help is so greatly appreciated.
Larry
Looks like you have initialisation for the
sched40-ws
table both in the main PHP file and insched40-ws-sql.js
. That's why you are getting the error:on page load.
I would suggest you move it all into
sched40-ws-sql.js
- combine the logic for the two (specifically the Ajax option).Also, in
sched40-ws-sql.js
you still have server-side processing enabled. I think you want to loose that.Allan
I have now moved, at least I think, all my table configuration related code to the external .js file (https://www.baldwinproject.ca/app/on/js/sched40-ws-sql.js). By default the .js file assigns default values for line number (9910) and year (2018). This all seems to work very well for me.
I would like to be able to call my .js file from the select box on my main page (https://www.baldwinproject.ca/app/sched40-ws-sql.php) and pass a different line number and year to the external .js file, so the user can change those values and return a new recordset into the datatable.
Your continued help is really appreciated.
I'm also wondering if there is an easy way to make the searchpane modal? I worry that users will not be able to visually understand they must interact with the searchpane and dismiss it in order for their selections to be applied to the datatable.
Look at it the other way around - the JS file should and an event listener to the
select
element. That's what you have with$('#selFunction').on('change', function (e) {
- that code just needs to be in the JS file.See this example.
Allan
I honestly didn't know you could have an event listener on another page like that. That knowledge opens a lot of doors now, thanks for that![:) :)](https://datatables.net/forums/resources/emoji/smile.png)
I've now implemented that, and sure enough, the listener does work. I may not have set it up properly though because I keep getting a cannot reinitialize error when I select a different line number. When the form opens, I am currently loading the total line (9910) by default. After that, I want users to be able to click the select box to display a different line to view the records associated with that line.
I've done a lot of reading, but have yet to find the solution to that particular issue. If you have time to look at https://www.baldwinproject.ca/app/on/js/sched40-ws-sql.js and point me in the right direction, I would be grateful.
Thanks for all your help to date![:) :)](https://datatables.net/forums/resources/emoji/smile.png)
Larry
Hi Allan,
I've been able to make some real progress on my datatable. I still have other things to fine-tune, but for now I won't need any further help on this thread. You can close it on your end.
I also want to say, thank you, I really appreciate the help you provide to all of us who are struggling to present data in a manner helpful to our users. You have an amazing product![:) :)](https://datatables.net/forums/resources/emoji/smile.png)
Hi Larry,
Awesome great to hear that you have been able to make progress. Looks like you are picking up Javascript quickly![:) :)](https://datatables.net/forums/resources/emoji/smile.png)
Allan