smus Posted February 23, 2017 Share Posted February 23, 2017 Allow me to ask more theoretic question: for example, I've got usual PHP+MySQL search that gets some information from database. I've typed some searching values, submitted the form and got some results. Now I need to sort them onclick, for instance, alphabetically, not repeating mysql-query to the server (on client side), is it possible to make it simply using JavaScript (not AJAX)? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 23, 2017 Share Posted February 23, 2017 Add copy of results to JavaScript array, then use .sort(). https://www.w3schools.com/jsref/jsref_sort.asp Link to comment Share on other sites More sharing options...
davej Posted February 23, 2017 Share Posted February 23, 2017 <script> var items = []; <?php $len = count($items); for ($i=0 ; $i<$len ; $i++) { echo 'item[' . $i . '] = "' . $items[$i] . '";'; } ?> // etc... </script> Link to comment Share on other sites More sharing options...
Ingolme Posted February 23, 2017 Share Posted February 23, 2017 If you're showing the result in a table, the quickest solution is to use an existing plugin to allow for table sorting. https://www.google.ca/search?q=jquery+sort+table If it's not a table, or you don't want to rely on a bulky library, then you can store your data in a Javascript data structure and sort the data structure, generating HTML upon sorting. Link to comment Share on other sites More sharing options...
smus Posted February 24, 2017 Author Share Posted February 24, 2017 Right, I just wanted to know if it's possible (using JS or JQuery). The task is slightly different: I'm showing the results in a table with a random number of <td>s, depending on the query; there are 3 <td>s in each <tr>. I need to reverse the order of <td>s in this table without sending additional queries. The initial order is: <table> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> </table> I need: <table> <tr><td>6</td><td>5</td><td>4</td></tr> <tr><td>3</td><td>2</td><td>1</td></tr> </table> Link to comment Share on other sites More sharing options...
dsonesuk Posted February 24, 2017 Share Posted February 24, 2017 IF you require this result pre sorted, without requiring it to be sorted after results return from database, why not sort it using 'ORDER' in sql statment or during output with php. Link to comment Share on other sites More sharing options...
smus Posted February 24, 2017 Author Share Posted February 24, 2017 In order not to reload a page and send another query to the server Link to comment Share on other sites More sharing options...
dsonesuk Posted February 24, 2017 Share Posted February 24, 2017 You need not reload or re-query if already sorted from the start. Otherwise place results in array and sort. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 24, 2017 Share Posted February 24, 2017 (edited) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript"> function sortTable(tableindex, sortType) { var tableParent = document.getElementsByTagName('table')[tableindex]; var tableCells = tableParent.getElementsByTagName('td'); var cellArray = []; for (var i = 0; i < tableCells.length; i++) { cellArray = tableCells.innerHTML; } if (sortType === "d") { cellArray.sort(); cellArray.reverse(); } else { cellArray.sort(); } for (var i = 0; i < tableCells.length; i++) { tableCells.innerHTML = cellArray; } } </script> <style type="text/css"> </style> </head> <body> <table> <tr><td>A</td><td>B</td><td>C</td></tr> <tr><td>D</td><td>E</td><td>F</td></tr> </table> <button onclick="sortTable(0, 'd')">Sort Descending</button> <button onclick="sortTable(0, 'a')">Sort Ascending</button> <table> <tr><td>5</td><td>4</td><td>3</td></tr> <tr><td>2</td><td>1</td><td>6</td></tr> </table> <button onclick="sortTable(1, 'd')">Sort Descending</button> <button onclick="sortTable(1, 'a')">Sort Ascending</button> </body> </html> Edited February 24, 2017 by dsonesuk 1 Link to comment Share on other sites More sharing options...
smus Posted February 27, 2017 Author Share Posted February 27, 2017 (edited) Thank you very much! It works well, but there is a mistake with HTML display. It turned, the table structure is a bit more complicated: there's an additional <td> </td> between the main td's (td's that hold an information), so when, for example, number of results equal 6, the overall number of td's is 10: <table> <tr><td>1</td><td> </td><td>2</td><td> </td><td>3</td></tr> <tr><td>4</td><td> </td><td>5</td><td> </td><td>6</td></tr> </table> But when the row is not full, there is an additional <td> </td> at the end of it (9 td's instead of 8): <table> <tr><td>1</td><td> </td><td>2</td><td> </td><td>3</td></tr> <tr><td>4</td><td> </td><td>5</td><td> </td></tr> </table> So it looks not right when I reverse it. I guess, I would need somehow to exclude the last td, if the tr contains less than 3 td. I can apply to main td via class(".td"), so I'm not sure if this code would work: if ($(".td").len % 3 <> 0) { $("table.td:last").empty(); } Edited February 27, 2017 by smus Link to comment Share on other sites More sharing options...
dsonesuk Posted February 27, 2017 Share Posted February 27, 2017 OR as you loop through each cell store any cell with ' ' in separate array, its index ref will be its original position. Sort the remaining values, then loop through both, making sure when for loop index ref equals that of ' ' index print that value, then the value from sorted array afterwards. 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted February 27, 2017 Share Posted February 27, 2017 (edited) Not as I suggested, but works <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <style type="text/css"> table {min-width: 25%; margin: 25px auto;border-spacing: 0; border-collapse: collapse; box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.5);} td {border: 2px solid #ccc; } body{text-align: center;} </style> </head> <body> <table> <tr><td>Apple</td><td>Cherry</td><td>Droopy</td></tr> <tr><td>Elephant</td><td>Fig</td><td>Banana</td></tr> </table> <button onclick="sortTable(0, 'd')">Sort Descending</button> <button onclick="sortTable(0, 'a')">Sort Ascending</button> <button onclick="sortTable(0, 'reset')">Reset</button> <table> <tr><td>5</td><td>4</td><td>3</td></tr> <tr><td>2</td><td>1</td><td>6</td></tr> <tr><td>7</td><td>10</td><td>8</td></tr> <tr><td>12</td><td>9</td><td>11</td></tr> </table> <button onclick="sortTable(1, 'd')">Sort Descending</button> <button onclick="sortTable(1, 'a')">Sort Ascending</button> <button onclick="sortTable(1, 'reset')">Reset</button> <table> <tr><td>1</td><td> </td><td>5</td><td>#</td><td>3</td></tr> <tr><td>4</td><td>#</td><td>2</td><td> </td><td>6</td></tr> </table> <button onclick="sortTable(2, 'd')">Sort Descending</button> <button onclick="sortTable(2, 'a')">Sort Ascending</button> <button onclick="sortTable(2, 'reset')">Reset</button> <table> <tr><td>Apple</td><td>Cherry</td><td>Droopy</td></tr> <tr><td>5</td><td>4</td><td>3</td></tr> <tr><td>2</td><td>1</td><td>6</td></tr> <tr><td>Elephant</td><td>10</td><td>8</td></tr> <tr><td>12</td><td>9</td><td>11</td></tr> <tr><td>7</td><td>Fig</td><td>1Banana</td></tr> </table> <button onclick="sortTable(3, 'd')">Sort Descending</button> <button onclick="sortTable(3, 'a')">Sort Ascending</button> <button onclick="sortTable(3, 'reset')">Reset</button> <script type="text/javascript"> var tableArray = []; function getDefaultTableValues() { var tableParent = document.getElementsByTagName('table'); for (i = 0; i < tableParent.length; i++) { tableCells = tableParent[i].getElementsByTagName('td'); tableArray[i] = []; for (var j = 0; j < tableCells.length; j++) { tableArray[i][j] = tableCells[j].innerHTML; } } } function sortTable(tableindex, sortType) { var tableParent = document.getElementsByTagName('table')[tableindex]; var tableCells = tableParent.getElementsByTagName('td'); var tableCellsToIgnore = [' ', '#']; var cellArray = []; var cellArrayString = []; var cellArrayNumber = []; var stringValidation = false; for (var i = 0; i < tableCells.length; i++) { if (isNaN(tableCells[i].innerHTML)) { //if string value set variable to true stringValidation = true; //copy string value to string array if (tableCellsToIgnore.indexOf(tableCells[i].innerHTML) === -1) { cellArrayString.push(tableCells[i].innerHTML); } } else { //copy number value to number array cellArrayNumber.push(parseInt(tableCells[i].innerHTML)); } } if (sortType === "d") { if (stringValidation) { // mix of numbers and string sort numbers and string arrays cellArrayNumber.sort(sortNumberDesc); sortTextDesc(cellArrayString); //concat string and number array in order suitable for Descending cellArray = cellArrayString.concat(cellArrayNumber); } else { cellArray = cellArrayNumber; cellArray.sort(sortNumberDesc); } } else if (sortType === "a") { if (stringValidation) { // mix of numbers and string sort numbers and string arrays cellArrayNumber.sort(sortNumberAsc); sortTextAsc(cellArrayString); //concat string and number array in order suitable for Ascending cellArray = cellArrayNumber.concat(cellArrayString); //if all string value sort using string sorting method if (cellArrayNumber.length === 0) { sortTextAsc(cellArray); } } else { cellArray = cellArrayNumber; cellArray.sort(sortNumberAsc); } } else { //reset to how values were originally displayed before sorting had taken place OOOOOKKKKKKKKKKK for (var i = 0; i < tableArray[tableindex].length; i++) { tableCells[i].innerHTML = tableArray[tableindex][i]; } } if (sortType !== "reset") { var m = 0; for (var i = 0; i < tableArray[tableindex].length; i++) { if (tableCellsToIgnore.indexOf(tableArray[tableindex][i]) === -1) { tableCells[i].innerHTML = cellArray[m]; m++; } else { tableCells[i].innerHTML = tableArray[tableindex][i]; } } } } function sortNumberAsc(a, { return a - b; } function sortNumberDesc(a, { return b - a; } function sortTextDesc(arr) { arr.sort(); arr.reverse(); } function sortTextAsc(arr) { arr.sort(); } getDefaultTableValues(); </script> </body> </html> Edit: add values to ignore in sort in array var tableCellsToIgnore = [' ', '#']; Edited February 27, 2017 by dsonesuk 1 Link to comment Share on other sites More sharing options...
smus Posted February 28, 2017 Author Share Posted February 28, 2017 Thanks again! Your version is good, but I've decided instead to correct some HTML display while request is processing, to simplify the task. Now there's an additional <td> </td> after each informational <td> (even at the end of a row). And my script removes the last <td> before the array reversal and after it adds new <td> at the end of the table(so that the table will have the same view if you toggle it once again). There are just <td> </td> filling the rest of the space in case if there are 2 results. I think I have to somehow add fixed width to them or give <tbody> 66% of width of the table. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 28, 2017 Share Posted February 28, 2017 What? As long as the table is fully rendered however you want and you tell it which content to ignore before running function getDefaultTableValues(); it should have enough infomation to sort. 1 Link to comment Share on other sites More sharing options...
smus Posted February 28, 2017 Author Share Posted February 28, 2017 Thank you, dsonesuk! The main thing is that it works! Your information was very helpful, especially in 9th post. Appreciate your help! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now