I have an form on my web site that a user can use to order a table of data by a column of choice. Essentially it is similar to this:
<form action="" method="post">
<select name="orderby">
<option value="col_1">Column 1</option>
<option value="col_2">Column 2</option>
<option value="col_3">Column 3</option>
</select>
<input type="submit" value="Order By"/>
</form>
It works well, but I want to update how this is done by allowing the user to click on the table column header instead. My attempt to do this was to add the onclick event to my table headers and use Javascript to POST the same array back to the page. In other words, Array ( [orderby] => col_2 ) when Column 2 is clicked on will remain exactly the same. This would preserve all of my other code. Here is the change I made to my table headers:
<table>
<tr>
<th onclick="post('col_1')">Column 1</th>
<th onclick="post('col_2')">Column 2</th>
<th onclick="post('col_3')">Column 3</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
<td>A</td>
</tr>
</table>
And here is the Javascript I wrote:
<script>
function post(clm) {
$.post('mypage.php',{orderby:clm});
}
</script>
This isn't working. Can anyone tell me what I need to change to get it to work? Right now if I click on the table headers, the $_POST array remains empty. (mypage.php is the same page that is calling the function. I also tried it with nothing between the single quotes, like you would with the form action attribute, but it didn't work that way either.)
This is what I arrived at for a solution. I embedded a form into each of the table header columns. The form contains hidden inputs with the information that I want included in the $_POST array. In the simplified example I used for my post, it is simply name="orderby" and value="the column name". In the the th tag, I kept the onclick event and have it calling a javascript function that allows me to pass the form name. The javascript function submits the form, which passes the $_POST array back to the page so all of the php code I'm concerned about executes. The array ( [orderby] => col_3 ) is used to update the ORDER BY attribute in my SQL query, so the correct data is returned to the page.
HTML:
<table>
<tr>
<th onclick="submitform('postdata1')">
Column 1
<form action="" name="postdata1" method="post">
<input type="hidden" name="orderby" value="col_1"/>
</form>
</th>
<th onclick="submitform('postdata2')">
Column 2
<form action="" name="postdata2" method="post">
<input type="hidden" name="orderby" value="col_2"/>
</form>
</th>
<th onclick="submitform('postdata3')">
Column 3
<form action="" name="postdata3" method="post">
<input type="hidden" name="orderby" value="col_3"/>
</form>
</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
<td>A</td>
</tr>
</table>
Here is the javascript function:
<script>
function submitform(formname) {
document[formname].submit();
}
</script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://raw.github.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js" type="text/javascript"></script>
<script type="text/javascript">
var st;
$(window).load(function(){
var table = $('table');
$('#col1, #col2, #col3') //all ID, za each
.wrapInner('<span title="sort this column"/>')
.each(function(){
var th = $(this),
thIndex = th.index(),
inverse = false;
th.click(function(){ //on click on any TH DOM object
table.find('td').filter(function(){
return $(this).index() === thIndex; //index of clicked element
}).sortElements(function(a, b){ //function sortElements.js
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
return this.parentNode;
});
inverse = !inverse;
});
});
});
</script>
</head>
<body>
<table id="tabela">
<thead>
<tr>
<th id="col1"><b>Column 1</b></th>
<th id="col2"><b>Column 2</b></th>
<th id="col3"><b>Column 3</b></th>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>ddd</td>
<td>eee</td>
<td>fff</td>
</tr>
<tr>
<td>ggg</td>
<td>hhh</td>
<td>iii</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
Here is an working example, hope it helps. And you don't have to make a request every time user clicks the table header.
Nice regards, Rok Jambrošič
try jqGrid.it is easy to order column recored by clicking on header.
Related
I am using JS/Jquery to dynamically add rows to by Table. Here is a template that I found online:
<table id="tblCustomers" cellpadding="0" cellspacing="0" border="1">
<thead>
<tr>
<th>Name</th>
<th>Country</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td><input type="text" id="txtName" /></td>
<td><input type="text" id="txtCountry" /></td>
<td><input type="button" onclick="Add()" value="Add" /></td>
</tr>
</tfoot>
</table>
From what I gather, in order to ensure that the actual cell content values get passed on Post I need to assign them to hidden fields.
How do I read the actual contents of the cells.
I tried:
$("#submitForm").click(function(){
alert("submit Clicked");
$('#tblCustomers tfoot td').each(function() {
var cellText = $(this).html();
});
});
however, All I got was this as return value:
Can you let me know what I need to do to get actual value of cell.
I need to make a dynamic table/item list and i would like to send the list of items back to server for processing. Sort of like a purchase list etc..
BTW: the backend is Django 2.0
Thanks for your help.
Tanmay
I am trying to select all the elements with class "name" and when I click on one radio button it flips the last and first name around, so: Hanks, Tom || Tom, Hanks. Here is what I have so far:
HTML:
<h1>Address Book</h1>
<p>Show Names as:</p>
<input name="lastfirst" value="last" type="radio">First, Last
<input name="firstfirst" value="first" type="radio">Last, First
<div>
<table <thead="">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</tbody>
<tbody>
<tr>
<td>9001</td>
<td class="name">Tom Hanks,</td>
<td>tomhanks#moviestars.com</td>
</tr>
<tr>
<td>9002</td>
<td class="name">Bruce Willis,</td>
<td>brucewillis#moviestars.com</td>
</tr>
<tr>
<td>9003</td>
<td class="name">Jim Carrey,</td>
<td>jimcarrey#moviestars.com</td>
</tr>
<tr>
<td>9004</td>
<td class="name">Tom Cruise,</td>
<td>tomcruise#moviestars.com</td>
</tr>
<script>
</script>
</tbody>
</table>
</div>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="./webassets/style.css" media="screen" type="text/css">
<h1>Company Staff List</h1>
<div>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>9001</td>
<td>Tom Hanks,</td>
</tr>
<tr>
<td>9002</td>
<td>Bruce Willis,</td>
</tr>
<tr>
<td>9003</td>
<td>Jim Carrey,</td>
</tr>
<tr>
<td>9004</td>
<td>Tom Cruise,</td>
</tr>
</tbody>
</table>
</div>
Here is my jquery. I used a filler of .hide() because other than selecting the elements I am not sure how to do this. Just some hints would help. I am not sure how to separate the first and last name. If I could figure out how to simply swap the first and last name into a variable I could definitely figure out the rest.
$(document).ready(function(){
$("input[name='lastfirst']").click(function(){
$(".name").hide();
});
$("input[name='firstfirst']").click(function(){
$(".name").hide();
});
});
DEMO
$(document).ready(function () {
$("input[name='change_last_first']:nth(0)").prop('checked', true)
$("input[name='change_last_first']").change(function () {
$(".name").text(function (_, old_txt) {
var new_txt = old_txt.split(' ').reverse();
return new_txt.toString().replace(',,', ' ') + ',';
});
});
});
HTML changed
<input name="change_last_first" value="last" type="radio">First, Last
<input name="change_last_first" value="first" type="radio">Last, First
References
.text()
.change()
.replace()
.split()
.toString()
.reverse()
Split it first using.
var splStr = input.split(/[ ,]+/);
now concatinate using input=splStr[1]+splStr[0];
you can separate the text using split function input.split(/[ ,]+/); along with a regular expression to separate each "word" within the input.
you could then assign each value to a new variable
ex:
var a = array[0], b = array[1]
From there you could concatenate the array values into any order you choose.
I have got the following HTML table...
<table>
<thead>
<tr>
<th>Nr.</th>
<th>Name</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Laura</td>
<td><input type="hidden" value="1">Info</td>
</tr>
<tr>
<td>2</td>
<td>Sabrina</td>
<td><input type="hidden" value="2">Info</td>
</tr>
</tbody>
</table>
How can I get with jQuery the value of the hidden input field, when the link is clicked?
$(".info").click(function() {
// Here I need to find out the value...
});
Here's how you do it :
$(".info").click(function(e) {
//just in case, will be useful if your href is anything other than #
e.preventDefault();
alert($(this).prev('input[type="hidden"]').val());
});
prev method will search for the previous element, which is where your input[hidden] is.
And its href, not hre, in the <a/> tags.
You can also use attributes <a href="#" data-hidden="1" class="info"> don't need use hidden fields
$(".info").click(function(e) {
e.preventDefault();
alert($(this).data('hidden')); // or $(this).attr('data-hidden');
});
I have a litte problem with the PicNet table Filter. Here is the demo.
Here is my JS:
$(document).ready(function() {
// Initialise Plugin
var options = {
additionalFilterTriggers: [$('#quickfind')]
};
$('#dataTable').tableFilter(options);
});
Here is the HTML:
<body>
Quick Find: <input type="text" id="quickfind"/>
<table id='dataTable'>
<thead>
<tr>
<th>File</th>
<th>Last Modified</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left">10.pdf</td>
<td class="right">22.03.12 19:45:58</td>
</tr>
<tr>
<td class="left">20.pdf</td>
<td class="right">22.03.12 19:45:58</td>
</tr>
<tr>
<td class="left">22.pdf</td>
<td class="right">22.03.12 19:45:58</td>
</tr>
</tbody>
</table>
..
Is it possible to search with #quickfind in only one (first) column?
when I search in #quickfind for "22" I got 3 results because the right column has a "22" in the date and time.
I disabled in the CSS the .filter class with display:none; because I only want one searchfield. I copied the genererated javascript code and replaced it with the #quickfind.
<input type="text" id="filter_0" class="filter" >
filter_0 is for the first row. filter_1 is for the second row. And so on. But the code works only in the table! and not above.
Any ideas to solve the problem?
You can disable the search for column(s), just put filter='false' attribute in the header th tag(s).
<th filter='false'>Last modified</th>
I have the following table. I want to copy Id value on the seleced row to the text box. If I click on link "Select" in the first row the text box value will 0001.
If the table needs modification to get result better and faster, please leave your suggestion.
<div>
<input id="selectedId" type="text" />
</div>
<table cellspacing="1" class="tablesorter" id="nameList">
<thead>
<tr>
<th class="header">Name</th>
<th class="header">Id</th>
<th class="header">Gender</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>Akom Smith</td>
<td>0001</td>
<td>M</td>
<td>Select</td>
</tr>
<tr>
<td>Amara Sahara</td>
<td>0002</td>
<td>F</td>
<td>Select</td>
</tr>
<tr>
<td>John Lache</td>
<td>0003</td>
<td>M</td>
<td>Select</td>
</tr>
</tbody>
</table>
try this,
$('a.click-to-select').click(function() {
var id = $(this).closest('tr').find('td').eq(1).text();
$('#selectedId').val(id);
return false;
});
simple cool demo
added notes for the comment below.
$('a.click-to-select').click(function() {
var id = $(this).closest('tr').find('td.id').text();
$('#selectedId').val(id);
return false;
});
updated demo
Well, you know your key is the second td in the row. You can use the :nth-child selector like this:
<script type="text/javascript">
var getUniqueId = function() {
return $('td:nth-child(2)').text();
}
</script>
Of course you need a way to identify the correct , but I assume the code is supposed to be called from each and there you can use the parent selector.
Otherwise I'd put an id attribute in each row to make selecting easier.