tablesorter multiple dynamic tables on one part - javascript

Hi I am totally stuck on this one.
I am using tablesorter on data pulled from a mysql database.
The problem is, based on criteria, I can have multiple tables pulled and displayed.
My problem is that tablesorter will only sort the first table instance.
This is the code I am using for the tablesorter. Basic use of it.
<script type="text/javascript" >
$(document).ready(function()
{
$("#table-2").tablesorter();
}
And this is how I pull the data and use it with tablesorter.
It is the Branchname that can change. If a user is assigned more than one branch they get multiple tables. This is where I'm stuck on implementing tablesorter on any table past the first instance.
$result=mysql_query("SELECT id FROM users WHERE username='$username'");
$idary=mysql_fetch_assoc($result);
$id=$idary['id'];
$result0=mysql_query("SELECT branch_id FROM access WHERE userid='$id'");
while ($row1=mysql_fetch_assoc($result0))
{
$branch_id=$row1['branch_id'];
$result=mysql_query("select distinct(name) from location where id='$branch_id'");
$nameary=mysql_fetch_assoc($result);
$branchname=$nameary['name'];
?>
<table>
<thead>
<b><br><?echo $branchname; ?></b>
</thead>
</table>
<div>
<table id='table-2' class='tablesorter'>
<thead>
<tr>
<thCreator</th>
<th><center>TeamName</th>
<th><center>Tech Tot</th>
<th><center>Tot W/O</th>
<th><center>Tot S/C</th>
</tr>
</thead>
// get team creators from province
$result1=mysql_query("select distinct(teamcreator) from techteams where....
I'm thinking I would need to use some form of incrementing tablename to match the number of tables pulled but I'm stuck on how to do this.
I could be wrong on that assumption and there might be a much easier way of doing this.
If anyone has any pointers in the right direction I'd love some tips.
Cheers,
-Colin.

you could try to give your tables an own class instead of an id.
<table class='mytables'>
<script type="text/javascript" >
$(document).ready(function()
{
$(".mytables").tablesorter();
}
</script>
or maybe only give them the table-sorter class and in your script you try something like this:
$("table").tablesorter();

Try it:
$(".tablesorter").tablesorter();

Related

Angularjs Table data biding

JSFiddle here
<tr ng-repeat="item in schedule.days[0].entries" scope="row">
<th>{{item.name}}</td>
<td ng-repeat="x in schedule.days.entries">{{x.value}}</td>
</tr>
I am trying to create a dynamic table in angularjs. I got to a point where I am able to display the name and table row but in table data I am not able to bind the value object property. Can someone please guide me what I am doing wrong on my ng repeat. I have been stuck on this for two days now some guidence would be really appreciated. Thank you
You're trying to access schedule.days.entries, but days is an array, not an object. You're missing the index, e.g.
<td ng-repeat="x in schedule.days[0].entries">{{x.value}}</td>
https://jsfiddle.net/0xsv2aq3/
Edit:
I was just showing how to access the values. If you want to take the values for the same name in different days and show it in the table, you can do something like this.
https://jsfiddle.net/bray3gmd/

Make html layout and use it with JS

I have a table with some data:
<table id="myTable">
<thead>
<tr>
<th><h1>Name</h1></th>
<th><h1>Picture</h1></th>
<th><h1>Likes</h1></th>
<th><h1>Time</h1></th>
</tr>
</thead>
<tbody>
***loop***
<tr>
<td>{placeholder1}</td>
<td><img src="{placeholder2}" alt=""></td>
<td>{placeholder3}</td>
<td>{placeholder4}</td>
</tr>
***end loop***
</tbody>
</table>
I have a js function who gets some data from server by POST request every 10 minutes. <tr></tr> block needs to be repeated several times.
HTML code become more and more complex and I need a solution with layouts and placeholders. I need a direction to search :)
All I need is:
Store <tr></tr> pattern with placeholders to insert it into my webpage. How could I achieve it with js?
How could I mark the places where I need data to be inserted?
Okay since you are using jQuery,
This may be your HTML
<table>
<tbody id="myTableBody">
<!-- Your elements will be placed here -->
</tbody>
</table>
I will assume you are using $.ajax or $.post in either of those, add a callback function property success
$.ajax({
// ... your properties,
success: function(data) {
// basic template for of your "tr"
var trTemplate = [
'<tr>',
'<td></td>',
'<td><img src="" alt=""></td>',
'<td></td>',
'<td></td>',
'</tr>'
].join('')
// get the tbody elemen
var $myBody = $('#myTableBody')
// if you want to clean up the current content of $myBody,
// if it is not the case just remove the following line
$myBody.empty()
// assuming data is an array of elements / entities
data.forEach(function(element){
var $tr = $(trTemplate)
$tr.find('td').eq(0).text(element.placeholder1)
$tr.find('img').attr('src', element.placeholder2)
$tr.find('td').eq(2).text(element.placeholder3)
$tr.find('td').eq(3).text(element.placeholder4)
$myBody.append($tr)
})
}
})
This is example of how you could do it, there are many ways to improve this for performance and so on. Please use it only as reference
If you're using jQuery then this is pretty straightforward. You need to id your elements so that you can reference them individually. Say you start with:
<tr id="tr-0" >
content...
</tr>
and then in javascript..
var id = $('#tr-0').attr('id');
var num = parseInt(id.substring(3));
num++;
$('#tr-0').after('<tr id='+num+'>content...</tr>');
obviously you need to figure how you're getting the content for each row but hopefully you can see that it wouldn't be too hard to fill each row with custom data.
Although you can use jQuery, simpler ways exist. jQuery will require you to add additional steps that aren't really necessary. If you want to use as few Javascript packages as possible, go with jQuery.
But, I highly recommend Vue.js for Laravel projects. There are instructions from Laracasts on how to set it up. But, I have created a jsfiddle with a working set of Vue.js with the v-for directive. Checkout the JSFiddle here.
If you have questions, I'll answer as much as I can.

removing inner table filter bootstrap

I have a filterable table containing a collapsible list in a column. The collapsible contains another table. Sample of the situation.
The problem is that when anything is written to filter only the required items, the inner table also gets filtered. Is there a way to avoid this.
Suggestions about how else to display something like this are also welcome.
If you want to filter only from the Name column, you can try to use below code:
$('#filter').keyup(function () {
var stringValue = $(this).val();
$("#outer-table tr.row").each( function( index ) {
$(this).hide();
$(this).find(".panel-title a:contains("+stringValue+")").parents("tr").show();
});
});
EDIT: I have tested the new code above, it works as expected.
HTML changes, easier to get ONLY every <tr> that are part of your outer-table:
Change your outer-table tag from <tbody class="searchable">, into this, <tbody id="outer-table" class="searchable">
Then add a selector to every <tr> inside outer-table but NOT inside inner-table, like this:
</tr>
<tr class="row">
<td><div id="collapsibleMain2" class="panel-group">
</tr>
<!-- and so on -->
For more info about the jQuery functions that I used above:
contains
each
hide

How to view the dynamically added fields in Angular.JS?

Please check this:
http://plnkr.co/edit/61JgnU?p=preview
If you start filling the fields you will see the fields been printed. Which is fine.
Now if you press the Add Input then bunch of fields will be added.
I need to add the newly added fields value to be printed under the main fields. (Please let me know if you need more explanation.)
Here is how I need it to be for the newly added fields:
I don't know how to show the fields without needing to make another $scope.fields array.
One more thing, in the $socpe.fields array there are more than 20 different fields, I just put what it needed for this question.
Thanks.
My recommendation would be to loop through your inputs array with the same markup you used for the users. The following seems to work if I understand what you're looking for.
<div ng-repeat="input in inputs">
<table class="table table-bordered">
<tr ng-repeat="field in fields | orderBy: 'index'" ng-show="input[field.id]">
<td class="col-md-4"><b>{{field.name}}</b>
</td>
<td class="col-md-7">{{input[field.id]}}</td>
</tr>
</table>
</div>
Another option you might want to consider is a custom directive taking the fields array and the display array as parameters.

Display only certain columns in a table

Been searching for answers but finding none. I have a code that displays a table pulled from a server-side genqueuesearch.php based on a parameter "rg1". Each row has a column called Queue with an "rg1" string in it. The table has several columns but my challenge is displaying only 4 columns. Here is my AJAX code:
<html>
<head>
<script language="Javascript">
function View(){
...
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("datatable").innerHTML=xmlhttp.responseText;
}
}
var parameters = "search="+"rg1";
xmlhttp.open("POST", "http://drcsblr0165/genqueuesearch.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(parameters);
}
</script>
</head>
<body onload="View()">
<div id="datatable" align="center"></div>
</body>
</html>
Tried getElementsbyTagName but I don't know the tag names for the columns I would like. Does this require saving the table to a text file first? I appreciate all your help and please ask if I'm not clear.
Since you can't alter what the server is giving you, then we are restricted to solving this with JavaScript only. I do suggest you use jQuery because it'll make things much simpler for you.
jQuery utilizes CSS selector pattern for finding elements in the DOM. You can leverage it to select which columns in the table you'd like to hide. You can even select specific columns even if you don't know the name of them.
Say, you get back a table like this from the server and you've put it inside your <div id="datatable">:
<div id="datatable" align="center">
<table>
<tr>
<td>dataRow1Col1</td>
<td>dataRow1Col2</td>
<td>dataRow1Col3</td>
<td>dataRow1Col4</td>
</tr>
<tr>
<td>dataRow2Col1</td>
<td>dataRow2Col2</td>
<td>dataRow2Col3</td>
<td>dataRow2Col4</td>
</tr>
<tr>
<td>dataRow3Col1</td>
<td>dataRow3Col2</td>
<td>dataRow3Col3</td>
<td>dataRow3Col4</td>
</tr>
<tr>
<td>dataRow4Col1</td>
<td>dataRow4Col2</td>
<td>dataRow4Col3</td>
<td>dataRow4Col4</td>
</tr>
</table>
</div>
For example, using the :nth-child selector doesn't require you to know the class name, $('#datatable td:nth-child(3)').hide(); will select the 3rd column and hide it. (see example: http://jsfiddle.net/Cjsua/)
You may find more suitable selectors on the jQuery documentation: http://api.jquery.com/category/selectors/
The .hide() function simply hides the elements matched.

Categories