[SOLVED] How hard would this table manipulation be for an OK jQuery user?

[alex3]

Hi,

 

Title is almost self-explanatory.. Essentially I have a table which shows the files in a given directory and is centered in both x and y. As you might imagine, as the number of files grows, above 15 ish, the table fills nearly the full browser window and does not look pleasing. It lists the directory contents using PHP.

 

To get rid of this problem, I came up with an idea, but because I'm not a JavaScript ninja just yet (I am learning, promise!, slightly better using jQuery, I need some advice as to the difficulty level of this task so I know if I stand any chance of being able to do it. My idea is (using mainly jQuery to select bits)..

 

[*]Create an array of all table rows (apart from the header row).

[*]Create new arrays from this master array every ten rows (i.e. if the table contains 34 rows, you would end up with 3 arrays).

[*]On page load, only show the first array (i.e. the first ten items) and put a clickable 'page' index on the bottom of the table.

[*]When a 'page' number (which I suppose would actually be sub-array numbers), is clicked, hide the currently showing array and show the corresponding array.

 

I'm pretty sure I can do step 1 with the knowledge I've already got, step two should be alright, it doesn't sound too awful, but the rest seems harder. What kind of level do you think this task is? Would this be better to implement with PHP?

 

[KevinM1]

Hi,

 

Title is almost self-explanatory.. Essentially I have a table which shows the files in a given directory and is centered in both x and y. As you might imagine, as the number of files grows, above 15 ish, the table fills nearly the full browser window and does not look pleasing. It lists the directory contents using PHP.

 

To get rid of this problem, I came up with an idea, but because I'm not a JavaScript ninja just yet (I am learning, promise!, slightly better using jQuery, I need some advice as to the difficulty level of this task so I know if I stand any chance of being able to do it. My idea is (using mainly jQuery to select bits)..

 

[*]Create an array of all table rows (apart from the header row).

[*]Create new arrays from this master array every ten rows (i.e. if the table contains 34 rows, you would end up with 3 arrays).

[*]On page load, only show the first array (i.e. the first ten items) and put a clickable 'page' index on the bottom of the table.

[*]When a 'page' number (which I suppose would actually be sub-array numbers), is clicked, hide the currently showing array and show the corresponding array.

 

I'm pretty sure I can do step 1 with the knowledge I've already got, step two should be alright, it doesn't sound too awful, but the rest seems harder. What kind of level do you think this task is? Would this be better to implement with PHP?

 

 

I think your best bet is PHP pagination with AJAX.  Let the server do the heavy lifting of figuring out what rows to show.  I know of at least one pagination tutorial on our site here (phpfreaks.com) that'll do the job just fine.  After that, it's a simple matter of using a jQuery post to run the pagination function and return the correct result set.

[haku]

You are definitely best off creating your pagination purely through php first, then adding ajax functionality to it after, the reason being that some users may have javascript turned off, in which case they would still be able to access all the content.

[alex3]

Hmm. Well my PHP script loops through every file and echo a <li> item for each file. I can't see how I could easily paginate this system..

[haku]

Do you mean you are reading the directory with glob() or something?

 

If so, then you end up with an array containing all the files right? That is ideal for creating your pagination - you know the total number of items (the number of array elements), and you can get any one page by taking a slice of the array containing the elements you need. It's actually easier than doing pagination from a database.