Develop Reference

Table Sorting, Filtering, Etc Matt Kruse's library

Situation:
I'm playing a little by using the Matt Kruse's library I found at the page Table Sorting, Filtering, Etc at the URL http://javascripttoolbox.com/lib/table/source.php.
It works pretty well but I wish to implement a little improvement (maybe it would be better to use the locution "new feature") and I don't know where to start because I'm a newbie in js and that js file uses more advanced programming statements I don't fully understand, not yet at least.
I have a single html file with some tables in it. Some of them are filterable and sortable thanks to that library. The number of tables may vary, the number of columns (fields) in each table may vary as well, and the number of records (rows) of each table may vary as well too. Of course the content is different in each table too.
By placing a specific css class in the th element of the targeted column I choose, I indicate to the Matt Kruse's library to create in that column a html element that is populated of a list of html elements that are computed dynamically by the js it self by picking a distinct and sole value of each record for that column.
When I wish to apply a filter to the table on the basis of certain column, I have just to choose the relative from the corresponding box and the table gets filtered accordingly, as I expect to. It works just hiding the records (the html rows) with not matching criteria in that specific column with a filter applied on it. Of course it is possible to use filters on more than one column at once if needed. It works pretty similarly to MS Excel.
The problem
When I apply a filter to a column the other columns filter drop-down combo boxes (the html elements that contain the compiled options for filtering other columns) continue to show all options instead of hiding those that are filtered in the table and are no more needed. So it becomes pretty tricky especially on complex tables to choose filtering criteria from other columns because the user has to understand by himself what are the criteria that aren't usable because the corresponding rows are already hidden by a filter already applied to another column.
One more thing: when I edit the content of one or more table cells, the filter of the relative column(s) doesn't update to match the editing made, but it seems to be to stay static.
Goal of this question
If I use a spreadsheet (as LibreOffice Calc, or MS Excel, or Google online spreadsheet, or else) when I filter a column other columns' filter drop down menu are filtered as well. If I remove a filter somewhere, other columns filters drop down are updated accordingly.
All this behavior is what I would like to implement into Matt Kruse's library. In this way it would be easier to filter by multiple columns because the boxes containing the filter criteria of the other columns will show just the filter criteria left by the all the previously applied filters.
What I have already tried
I tried to implement something to do that but it was so slow that I was too much ashamed of its execution time that I already deleted the whole algorithm I created.
For comparison using the Matt Kruse's library algorithm implies just few instants to compile all tables data into filter elements (on all tables as well). But the algorithm I've implemented needed more than 30-40 seconds for just one table. Way too inefficient.
Substantially I wrote few "for loops" that for each into each of the filtered table, compares the value of the option with each one of the corresponding column and if finds a mach keeps the option visible, else it hides that element into the . I attached that algorithm to the change event of each , so when I clicked and selected the the event was triggered and all the content of the table was updated. It worked as expected but, as I said, what I implemented was way slower.
So the question is:
How do I modify the Matt Kruse's js file to implement the feature I want keeping the highest possible performance?
(If Matt Kruse is reading this, feel free to pick up this idea and implement the new features needed above: I'm sure it would be greatly appreciated).
Thanks everybody in advance for the contribution.

sorting the column by clicking on the column's header

I am trying to implement one sorting functionality in my code in php. The functionality will be like, when we click on the header of a column then that particular column's record will be sorted by ascending order and again click on the same column means the column's record will be sorted by descending order.
Please help me how to proceed with some example.

JQuery has many plugins that do this sort of thing. I have used Tablesorter with great results in my own projects.

I too recommend jQuery Tablesorter, it's an excellent little plugin.
You really want to avoid doing the sorting backend, as this will put strain on your server, but if you wanted to it would be as simple as appending an ORDER BY instruction to your query depending on what column the user clicked. Again, I do not recomment this method, I think you should do it in the frontend with a plugin such as Tablesorter.

jqGrid multi-select sort/show checked items at the top always

I have a a jqGrid that shows as list of rows ... several thousand.
When the grid loads, it will pull down all the data with their previous selections already checked.
My questions is, how do I set the sort order to always show the selected items at the top?
Thanks in advance!!

You question seems be very close to another one which I answered recently (see here). If you has several thousand or event thousand rows you should use paging of date to improve performance of the grid. The solution which I suggested is very simple and it supports saving of selected state over the paging.
One more remark. If you have jqGrid with local data you can implement custom sorting of data. To do this you just need define sorttype as function. If the data need be sorted by a column jqGrid will compare items. The function sorttype should just return any string or number which should be used instead of the cell value. In the case you can easy place for example selected items at the top of grid. You can find examples of custom formatting here, here and here.

Add excel-like element list in HTML table header

I would like to realise a table with a specific functionnality on header, in fact I would like to do like in Excel spreadsheet, a header capable of displaying a list of any elements in the column...
I looked over datatable for Jquery and others plugin, but no one could realize what I want. Does anyone know if such functionnality already exists ? And if not, what would be the easiest to implement it..?
Thanks

Not sure if I understand what you are looking for but doesnt this example of data tables achieve what you need ?
http://www.datatables.net/release-datatables/examples/api/multi_filter_select.html

How can I populate select boxes with multiple values?

I'm setting up a jqGrid which needs to visualize multiple values in one cell. The input comes from a form where the user can select multiple choices. I am able to display the select box, but not populate it. I have tried to insert an array in the JSON object, but to no success.
This is the model:
index:'ship', editoptions:{multiple:true, value:{1:”FedEx”,2:”InTime”,3:”TNT”,4:”ARAMEX”}}
And here are some variations of the data I've tried populating with:
ship:{[1],[4]}
ship:[[1],[4]]
ship:{value:{1,4}}
...and lots of other variations.
I've also searched the jqGrid forum, but didn't find a solution. How can I fix this problem?

Oh boy!
I had the answer all the time. It was just as easy as I had hoped it would be.
Here's how it's done:
ship:["FedEx","TNT"]
The reason for why I didn't think it worked is because jqGrid shows the data as "FedEx, TNT", thus making me believe it was only a string. Instead of clicking the cell to see what had happend, I spent hours looking for the answer on the internet. If you'd like to know what happends; jqGrid renders a select list with both elements selected. Simple.
Happy jqGrid'ing!