Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Sort an html table by day of week. 1

Status
Not open for further replies.
pdbowling

pdbowling

Programmer
Mar 28, 2003
267
US
Hello, All.

I have an html table. The first column is a drop list with the days of the week in it Sunday through Saturday. Second column is two text boxes for start time and end time. The other column is a drop list (true/false). In the html, each row (other than the header) has a GUID for the id attribute and a class attribute.

The data in the html table comes from a database and is sorted by day of week, start time, and stop time.

I am being told to reorder the table when a new choice is made from the day of week drop list (OnChange is firing no problem).

Example: Here is an example that could need to change since there is an error in the database.

Sunday 00:00 - 23:59 Off
Monday 00:00 - 08:29 Off
Monday 00:00 - 08:29 Off
Monday 08:30 - 16:59 On
Monday 17:00 - 23:50 Off
Tuesday 08:30 - 16:59 On
Tuesday 17:00 - 23:59 Off

The select would change it to this:
Sunday 00:00 - 23:59 Off
Monday 00:00 - 08:29 Off
Tuesday 00:00 - 08:29 Off
Monday 08:30 - 16:59 On
Monday 17:00 - 23:50 Off
Tuesday 08:30 - 16:59 On
Tuesday 17:00 - 23:59 Off

Now I need it to reorder to this:
Sunday 00:00 - 23:59 Off
Monday 00:00 - 08:29 Off
Monday 08:30 - 16:59 On
Monday 17:00 - 23:50 Off
Tuesday 00:00 - 08:29 Off
Tuesday 08:30 - 16:59 On
Tuesday 17:00 - 23:59 Off

I am new to javascript, so I don't even know where to begin. My OnChange is firing, so at least that is in place.

I am doing my javascript in a .cshtml page

I am doing what I am told, so 'why would you do that when you could use a datatable?' will not be a helpful suggestion.

Thanks, Everyone.
Patrick B
 
Sort by date Sort by votes
You can't do that purely clientside. Your javascript code will have to trigger the server side code to requery the database with the new ORDER BY clause, then repopulate the content.




Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
I think that can be done in pure JavaScript

I am not at the office to write a solution as a proof of concept but here is the pseudo code

Code: 
1. Replace each of Sunday to sat with an incrementing number. 
2. Perform an alphanumeric sort of the collection of the collection
3. Reverse the replacing in 1. 
4. Replace the collection of options with the sorted collection from 2

Writing this up should only take a couple of minutes.
 
Upvote 0 Downvote
I have to agree with Chris. You'll need to re-request the page, and have the info be reordered server side. Doing it in Js, will be nightmare as you will be dealing with flat html you will need to parse to get the values, and then order those values.

The easiest method is to simply reload the page with a parameter in the URL, and build your query based on that parameter so that the table is reordered.

You could of course implement an Ajax call to avid reloads, but depending on your Js knowledge it may prove too cumbersome as well.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Go to the following link and see if that will work for you.


mmerlinn


Poor people do not hire employees. If you soak the rich, who are you going to work for?

"We've found by experience that people who are careless and sloppy writers are usually also careless and sloppy at thinking and coding. Answering questions for careless and sloppy thinkers is not rewarding." - Eric Raymond
 
Upvote 0 Downvote
I must be missing something since two of you have said this is difficult/nightmare. I guess I have misunderstood the question.

this code works and to the extent I understand the question, does what the OP is looking for. I've taken the liberty of using jQuery but it can be done in native javascript. a jsFiddle is also here.

Code: 
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
        </script>
        <script type="text/javascript">
            var dayArray = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
            function getText(row){
                var cols = $(row).find('td');
                var text = '';
                var text = $(cols[0]).find('select').val();
                $(cols[1]).find('input').each(function(){
                    text = text + ' ' + $(this).val();
                });
                text = text + ' ' + $(cols[2]).find('select').val();
                return text;
            }
            
            $(document).ready(function(){
                $('#myTestButton').on('click', function(){
                    var mySelect = $('#mySelect');
                    var rows = mySelect.find('tr');
                    var texts = new Array;
                    for (var i = 0; i < rows.length; i++) {
                        var tempText = getText(rows[i]);
                        for (var d = 0; d < dayArray.length; d++) {
                            tempText = tempText.replace(dayArray[d], "|" + d + "|");
                        }
                        texts[i] = tempText;
                    }
                    texts.sort();
                    mySelect.find('tr').remove();
                    for (var i = 0; i < texts.length; i++) {
                        var tempText = texts[i];
                        for (var d = 0; d < dayArray.length; d++) {
                            tempText = tempText.replace("|" + d + "|", dayArray[d]);
                        }
                        for (var j = 0; j < rows.length; j++) {
                            if (getText(rows[j]) == tempText) {
                                mySelect.append($(rows[j]));
                                break;
                            }
                        }
                    }
                })
            });
        </script>
    </head>
    <body>
        <table id="mySelect">
            <tr>
                <td>
                    <select name="dow">
                        <option value="0" selected="selected">Sunday</option>
                        <option value="1">Monday</option>
                        <option value="2">Tuesday</option>
                        <option value="3">Wednesday</option>
                        <option value="4">Thursday</option>
                        <option value="5">Friday</option>
                        <option value="6">Saturday</option>
                    </select>
                </td>
                <td>
                    <input value="00:00"/>- <input value="23:59"/>
                </td>
                <td>
                    <select name="state">
                        <option value="0" selected="selected">Off</option>
                        <option value="1">On</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <select name="dow">
                        <option value="0">Sunday</option>
                        <option value="1" selected="selected">Monday</option>
                        <option value="2">Tuesday</option>
                        <option value="3">Wednesday</option>
                        <option value="4">Thursday</option>
                        <option value="5">Friday</option>
                        <option value="6">Saturday</option>
                    </select>
                </td>
                <td>
                    <input value="00:00"/>- <input value="08:29"/>
                </td>
                <td>
                    <select name="state">
                        <option value="0" selected="selected">Off</option>
                        <option value="1">On</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <select name="dow">
                        <option value="0">Sunday</option>
                        <option value="1">Monday</option>
                        <option value="2" selected="selected">Tuesday</option>
                        <option value="3">Wednesday</option>
                        <option value="4">Thursday</option>
                        <option value="5">Friday</option>
                        <option value="6">Saturday</option>
                    </select>
                </td>
                <td>
                    <input value="00:00"/>- <input value="08:29"/>
                </td>
                <td>
                    <select name="state">
                        <option value="0" selected="selected">Off</option>
                        <option value="1">On</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <select name="dow">
                        <option value="0">Sunday</option>
                        <option value="1" selected="selected">Monday</option>
                        <option value="2">Tuesday</option>
                        <option value="3">Wednesday</option>
                        <option value="4">Thursday</option>
                        <option value="5">Friday</option>
                        <option value="6">Saturday</option>
                    </select>
                </td>
                <td>
                    <input value="08:30"/>- <input value="16:59"/>
                </td>
                <td>
                    <select name="state">
                        <option value="0">Off</option>
                        <option value="1" selected="selected">On</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <select name="dow">
                        <option value="0">Sunday</option>
                        <option value="1" selected="selected">Monday</option>
                        <option value="2">Tuesday</option>
                        <option value="3">Wednesday</option>
                        <option value="4">Thursday</option>
                        <option value="5">Friday</option>
                        <option value="6">Saturday</option>
                    </select>
                </td>
                <td>
                    <input value="17:00"/>- <input value="23:59"/>
                </td>
                <td>
                    <select name="state">
                        <option value="0" selected="selected">Off</option>
                        <option value="1">On</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <select name="dow">
                        <option value="0">Sunday</option>
                        <option value="1">Monday</option>
                        <option value="2" selected="selected">Tuesday</option>
                        <option value="3">Wednesday</option>
                        <option value="4">Thursday</option>
                        <option value="5">Friday</option>
                        <option value="6">Saturday</option>
                    </select>
                </td>
                <td>
                    <input value="08:30"/>- <input value="16:59"/>
                </td>
                <td>
                    <select name="state">
                        <option value="0">Off</option>
                        <option value="1" selected="selected">On</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <select name="dow">
                        <option value="0">Sunday</option>
                        <option value="1">Monday</option>
                        <option value="2" selected="selected">Tuesday</option>
                        <option value="3">Wednesday</option>
                        <option value="4">Thursday</option>
                        <option value="5">Friday</option>
                        <option value="6">Saturday</option>
                    </select>
                </td>
                <td>
                    <input value="17:00"/>- <input value="23:59"/>
                </td>
                <td>
                    <select name="state">
                        <option value="0" selected="selected">Off</option>
                        <option value="1">On</option>
                    </select>
                </td>
            </tr>
        </table>
        <br/>
        <button id="myTestButton">
            Click me
        </button>
    </body>
</html>
 
Upvote 0 Downvote
As I understand it the OP wants to reorder an entire HTML table of unknown length when a change occurs in one of the rows. Not changing the order of the dropdowns but of the entire html table based on what is set in the dropdowns.


So if the row that had a monday selected is changed to tuesday then the reordering would put that entire row with the other tuesdays.

Parsing the HTML to get the values, reordering those values, and the recreating the HTML table is not an straightforward task.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Phil
My code above does sort the entire table in the way that you outlined.
 
Upvote 0 Downvote
I stand corrected.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Upvote 0 Downvote
Don't mess about trying to do this yourself.

There are a load of JS/JQuery plugins for handling this for you, and you certainly don't need to requery any DB.

This is probably my favourite :
It's sortable, searchable, drag/droppable columns, limit number of rows, has page navigation... all you could want for your table data :)

Once you have the plugins loaded, it couldn't be any simpler than
Code: 
$(document).ready(function(){
    $('#YourTableID).dataTable();
});

You can check out a demo I put together to show dragable columns as well
Of course It may or may not be what you are looking for, but it's a mean table plugin certainly worth a gander!


"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music
 
Upvote 0 Downvote
guys - the OP wanted just to sort some stuff based on what was contained in selects and inputs. the standard sortable plugins don't do that. they use text nodes, not form controls.

they are also heavyweight classes that are cleverly designed.

sometimes it's a good idea to look at the actual use case and develop for that. In this case about 40 spaced out lines of code that took maybe 10 minutes to write solves the problem for this use case.

old adage: Keep It Simple []
 
Upvote 0 Downvote
Upvote 0 Downvote
you have to take into account the weight of the module too.

and, as said, datatables (sfaik) did not address the OP's needs of sorting on the value of select fields rather than text nodes.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
441
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
455
malpa
malpa
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
924
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
497
xwb
xwb
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
397
Rayj0000
Rayj0000

Part and Inventory Search

Sponsor

Back
Top