Datatables plugin with directory listing not working when switching folders

oceantrl

https://silverspr2.asuscomm.com:8080/pageme/
I have a directory listing I would like to use the DataTables plugin with. The search/pagination is working on the initial load of the page. When switching to a new folder both search / pagination break. See above link. I'm thinking the plugin needs to be re-initiated for each new folder?? A pure guess on my part. Hopefully someone here has way more experience than I. I've tried running the debugger using both jquery and API modes, but it keeps throwing ajax errors i.e. Uncaught TypeError: a.ajax is not a function
thanks for any and all help.

kthorngren

I'm not sure exactly what you are doing but it appears you are updating the HTML which Datatables doesn't know about. See this FAQ. You will want to use either the rows().invalidate() or destroy() methods described after updating the HTML table.

Kevin

oceantrl

Thank you for your comments, I agree with your input, DataTables doesn't update with the data found in each hyperlinked folder i.e. neither pagination or search works on the files within. I was not able to get your suggestions to work but I'm sure its my lack of understanding. Are those methods used with the plugin or do they replace the plugin? I tried both ways! The destroy method seems to make the most sense in this scenario, but it only works with a button click? It can't be done w/o user input? Meaning I'd like it to work seamlessly when the user clicks on the folder hyperlink.
thanks again

kthorngren

Are those methods used with the plugin or do they replace the plugin?

Sorry I'm not sure what you are asking. They are API's built into datatables.js.

The destroy method seems to make the most sense in this scenario, but it only works with a button click?

You can call either of those API's at anytime. If you wan the destroy() method then use it before you change the HTML data. Or if you aren't changing the HTML table structure use -pi rows().invalidate() after making the changes. Make sure oyu use draw() as shown in the examples.

Kevin

oceantrl

This is where my lack of understanding comes in. My table is #data, so I now have:

<script type="text/javascript">

$(document).ready( function () {
    $('#data').DataTable();
} );

var table = $('#data').DataTable();
var tr = $('#data tbody tr:eq(0)');
 
tr.find('td:eq(0)').html( 'Updated' );
table
    .row( tr )
    .invalidate()
    .draw(); 

</script>

Which doesn't do anything. How is rows invalidate triggered?
Sorry if I'm not making any sense.

tangerine

Your code is wrong. Put it all inside your document.ready function; then get rid of line 4 from the above. ( $('#data').DataTable();)

oceantrl

Ok this is what I have now:

<script type="text/javascript" >
$(document).ready( function () {
var table = $('#data').DataTable();
var tr = $('#data tbody tr:eq(0)');
  
tr.find('td:eq(0)').html( 'Updated' );
table
    .row( tr )
    .invalidate()
    .draw();
 
} );
</script>

Still no refresh on switching directories

kthorngren

Still no refresh on switching directories

How are you switching directories? Is there an event or a callback that can be used once the HTML table is updated? That is where you would use rows().invalidate(). Note the use of rows with an s with not parameters. This will select all rows. You will want to call this once you have rewritten the HTML table.

I'm assuming your code is completely replacing the HTML rows with switching directories. Is that true?

Kevin

oceantrl

I'm clicking on a hyperlink to switch directories, and yes I am assuming the output is replacing the HTML rows.

the example is here:
https://silverspr2.asuscomm.com:8080/pageme/index.php

that's what I meant earlier when I said how do I trigger the redraw...when I click on the hyperlink.

kthorngren

I see now how the page works. The above recommendations of destroy() and rows().invalidate() won't help as the whole page is loading. I see the problem. Inspecting the rows of the first page looks like this:

Inspecting the second page the rows look like this:

In the second screenshot you can see each row is inside its own tbody tag. The Datatables HTML requirements doc states this:

For DataTables to be able to enhance an HTML table, the table must be valid, well formatted HTML, with a header (thead) and a single body (tbody).

Datatables only recognizes the rows in the first tbody element it finds which is why it thinks there is only one row. The DirLIST PHP script, found here will need to be changed to only have one tbody tag for the table. Maybe you can do this or go through their support to have this change made.

Kevin

oceantrl

Gee...thanks for that, I thought I had fixed those body tags, not sure how they are getting in there, or how I missed them!

oceantrl

Yayyy, thank you for your patience, it works as intended. My only challenge now is the sorting where there are both folders and files, they are intermixed. Need to figure out how to sort the folders ahead of the files.

Thank you many times over

kthorngren

Since you are building the HTML with the PHP script I would look at using HTML5 data attributes for sorting as described here:
https://datatables.net/manual/data/orthogonal-data#HTML-5

Maybe concat the file name with a leading indicator (0 for folder, 1 for file for example) to result in something like this data-order="0-Cookies" or data-order="1-index.php". Datatables should then sort by the leading number first then by the file name.

Or if you prefer Javascript you can use the columns.render function to do something similar for the filter operation, explained on the same page.

Kevin