Html table sorting using JavaScript or jQuery - javascript

This is a image of my sample code. I want to sort this table data, column wise when click the each sort button in top in the table. This table contains PHP also.
Number
Date
Three
Five
One
Four
Two
When user click on sort button, entire row should be sorted in acs or desc according to clicked column's data. Column contains words and column 2 contains dates.
Anyone knows that help me please....
Thanks

Can you check jquery datatable plugin. That supports sorting, expanding columns for a table. Please see the link
https://datatables.net/examples/basic_init/table_sorting.html

I would start with this:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table
It's works just fine, and doesn't require even jQuery, let's alone jQuery plugins.
It's obviously, you should adapt code to sort with different columns names (not just for "Name"), but is easy enough.

You can use table-sorter (a client-side table sorting) and sort the table once after the page loaded. After that each of the columns is sortable by clicking the column header (It is in pure javascript and doesn't need jquery):
http://tablesorter.com/docs

I have used the tablesorter jQuery plugin. It is a light weight and a very good plugin for your needs. I think this will suits to your need.

Related

Set an HTML table with filters and sorting

I am looking for a script that allows me to insert in an html table the possibility of filtering data with the same (or almost) elasticity that for example Excel offers, that is the possibility of filtering certain elements even on multiple fields, the possibility of order in ascending and descending order and also the possibility of filtering all elements, for example greater or less than a certain number.
Is there something a thing like that?
Thanks a lot for the support!
Datatables is the solution:
Url: https://datatables.net/
You have multiple plugins/extensions for this... You can do everything you imagine...
Select by column value:
https://datatables.net/examples/api/multi_filter_select.html
Search in each column:
https://datatables.net/examples/api/multi_filter.html
By the description of your issue I would suggest you to take a look at the Datatables website or in the Tabulator website. Both work pretty well and are very easy to get up and running.

Better way to create a paginated list of divs

Problem:I need to create a list of "divs" which will contain information regarding hostels (profile picture, a button to book a room there and some short info). This list will be dynamically created through a query to a database. The list should be paginated and only show the first n hostels by making Ajax calls to the db.
My solution: Have a template div created iteratively. Use javascript to implement the pagination requirement.
My question: Does my invent the wheel solution make sense? Or am I better off using some existing library/framework to achieve this if yes any suggestion regarding existing tool would be appreciated (It might be off topic but have failed to find a single library to achieve this).
normal table with one column and three rows
table with one column but splitted rows
There are plenty of libraries available to achieve it, one of which I used is
datatables.js
and is working fine. Has option for paging, sorting searching etc.
Just to give an idea based on your design, you can have a single column table which can have the template of your div (datatables give option to define template for your column) and then you can define sorting as well based on some of your fields data.
Paging it does automatically but you can still configure it.
It also has feature of searching, so you can give option to search for particular hostel or price or anything.

Datatables 1.10 - Swap table

In my application I have table that can have multiple columns, based on date range selected.
I need to be able to display table containing 20 columns or 50 columns (number of columns is based on data range from parameters). I did that, but I was refreshing page when my parameters changed.
Now I'm trying to do it better.
I've created sample that shows my approach: http://live.datatables.net/fojusec/3
Basically I'm swapping "table" with new content that comes from ajax request and then I'm calling "dataTable" on that new table.
My example works fine, but I was wondering if maybe there is a better way to do it, maybe by reconfiguring table?
Is it safe to do that like I did it? I'm worried about any leaks.
EDIT:
What I'm not sure is if dataTable object is attached to table. So if I'm removing table from DOM should I be removing dataTable object also.
I would like to avoid any conflicts. I clicked on my example for some time and I didn't got any errors.
QUESTION: What is the best way to swap or reconfigure table using datatables 1.10

Best way for custom filtering in SlickGrid

In my app, I have a SlickGrid data grid and I would like to support filtering on it.
I went through these examples:
SlickGrid example 4:
Model
Using fixed header row for quick
filters
I am not interested in the UI of those two examples. I want to provide a filter icon on the column header and when a user clicks it, a drop down should popup with distinct items in the column and checking or unchecking these should filter the column by them.
I can code all this up on my own but as there is some filtering supported in SlickGrid, is there any way I can change the UI as I described earlier?
I am assuming that many people must have already thought in that direction.
Any other suggestions are welcome.
Thanks
I did it using my own coding..there is no inbuilt way of providing a filter like what you want..
You have to first create a button in every header column clicking which will show/hide the panel in which all columns with checkboxes will be there...
Now when you check/uncheck any CB you need to trigger the updateFilter function which is called on keypress in the examples links which you have posted and then check if the entered string is in the columns which are checked(all columns if nothing checked or whatever is your approach) and return true or false accordingly

Hiding HTML Table rows when using Sorttable

I have a large table (4000 rows, 17 columns) with which I use Sorttable. It's somewhat usable in Chrome (not so much in IE). I'd like to add some checkboxes (not on each row, just in a control panel besides the table) to show/hide groups of rows, using Javascript. I'm not (so far) using JQuery or anything other than Sorttable (which works great, by the way).
What's the best way to hide those rows? I think I need to do more than just set display: none; on the rows I want to hide, as I think this means the row would still get sorted by Sorttable. I suppose I want to remove the row from the table altogether, and keep them in some list outside the DOM? Would anybody happen to have some existing/sample code that does that?
One possibility is to save all data in JSON and then write it to an table. By this you can remove the item from the table, sort the table and add the item again if you'd like.
Don't have an example right now but check it out.
Could probebly save the table with
http://api.jquery.com/jQuery.data/
Hope it's some help

Categories