I have a table that is displayed on a certain page. The column toggle works for this table since it is already loaded in the page. The table structure looks like this:
<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke infotbl hidecol">
<thead>
<tr>
<th data-priority="1" class="ui-table-priority-1">Campaign</th>
<th data-priority="1" class="ui-table-priority-1">Description</th>
<th data-priority="3" class="ui-table-priority-3">Leads</th>
<th data-priority="3" class="ui-table-priority-3">Quotes</th>
<th data-priority="3" class="ui-table-priority-3">Sales</th>
<th data-priority="4" class="ui-table-priority-4">Premium</th>
<th data-priority="5" class="ui-table-priority-5">P-Factor</th>
<th data-priority="1" class="ui-table-priority-1">Lead To Quote</th>
<th data-priority="1" class="ui-table-priority-1">Sale Conversion</th>
<th data-priority="2" class="ui-table-priority-2">Total Comm</th>
<th data-priority="2" class="ui-table-priority-2">IMU</th>
<th data-priority="1" class="ui-table-priority-1">Total After IMU</th>
<th data-priority="1" class="ui-table-priority-1">VPL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="alleft">1013-HCBC-1</td>
<td class="alleft"></td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0.00</td>
<td>4</td>
<td>0%</td>
<td>0%</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td class="alleft">1013-LIFE-1</td>
<td class="alleft">medicalaidsite.co.za</td>
<td>46</td>
<td>15</td>
<td>3</td>
<td>506.00</td>
<td>4</td>
<td>33%</td>
<td>7%</td>
<td>2024.00</td>
<td>355.09</td>
<td>1420.35</td>
<td>30.88</td>
</tr>
</tbody>
</table>
The table changes depending on the date range selected. I send the data through AJAX and then there's a script that processes it and returns back a table similar to this. The problem is: the column toggle is not applied to the data (table) that the AJAX returns.
This is the AJAX/Javascript code:
$('.frankbtngo').click(function(){
var date = $('#frankdate').val();
$('#frankstats').html(fetch_data);
$.ajax({
type: 'post',
url: 'frankstatsfilter.php',
data: {
date:date
},
success:function(data){
$('#frankstats').html(data);
}
});
});
I tried to put $(".hidecol").table("refresh"); on the success part but it doesn't work. Is there any way I could re-enable/re-apply the column toggle to the table returned by AJAX?
When you load the html content onto the page the widgets aren't created. To solve this trigger the create method after you've loaded the data.
success:function(data){
$('#frankstats').html(data);
$('#frankstats').trigger('create');
}
Related
I've got some text displaying in a table (oldschool, I know) and I'm trying to identify that specific <td> element so I can use jQuery to wrap() <a href> tags around it and convert it to a link.
The problem is, none of the <td>'s in the table have unique classes or ID's, and there will always be an unknown amount of <td>'s before the one I want to access, so I don't think I can use nth of child.
The ONLY unique way that <td> is identifiable is the <td> DIRECTLY before it, which will contain some text that will always be the same. Can I use jQuery to find that <td> based on the text inside it, then target the <td> directly after that? Or is there a better way to do this?
You can use jQuery to fetch element that contains specific text and access the next td as required with a single line of jQuery code. This won't thrown an exception in case when there is no next td.
$(document).ready(function() {
var yourVal = $('td:contains("2.2")').next('td').text();
console.log(yourVal);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
</tr>
</tbody>
</table>
You are looking for the nextElementSibling of the <td> with unique textContent. In order to find it, loop over all the <td>s and then get the nextElementSibling of the <td> with unique textContent. And when you find it, break.
const tds = document.querySelectorAll("td")
for (let td of tds) {
if (td.innerText.includes("Larry")) {
const element = td.nextElementSibling
console.log(element.innerText)
break;
}
}
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
If you like jQuery, use this.
const td = jQuery("td:contains('Larry')").next("td").text()
console.log(td)
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
Is it possible to make sorting function using only javaScript, without any other library for sorting?
Let's say I have one table, and it's first column that has date values in this format: MM/dd/yyyy. Table has two more columns, like this:
<table id="results" width="360" border="1">
<thead>
<tr>
<th scope="col" width="120">Date Created</th>
<th scope="col" width="120">Name</th>
<th scope="col" width="120">Tests</th>
</tr>
<tr>
<td>07/08/2015</td>
<td>Test Name</td>
<td>Raven</td>
</tr>
<tr>
<td>05/04/2015</td>
<td>Test Name 4</td>
<td>Raven 3</td>
</tr>
<tr/>
<td>01/08/2017</td>
<td>Test Name 2</td>
<td>PCT</td>
</tr>
</thead>
</table>
Would it be possible to lets say add one button, and on click event sort rows by values in Date column?
I have to accomplish this using only plain javaScript and HTML, so no jQuery unfortunately :(
Here's a little something I whipped up to give you some ideas. Obviously you could extend this to sort by other data types.
I've "cheated" on the date comparisons by just changing the string format date directly to an eight-digit number in the form 20140312 from "12/03/2014" - note that I've assumed the date input format is dd/mm/yyyy, so if for some reason you're actually using mm/dd/yyyy you'll have to tweak the convertDate() function.
Also I've introduced a <tbody> into your table so that I can just sort the data rows and completely ignore the header row.
function convertDate(d) {
var p = d.split("/");
return +(p[2]+p[1]+p[0]);
}
function sortByDate() {
var tbody = document.querySelector("#results tbody");
// get trs as array for ease of use
var rows = [].slice.call(tbody.querySelectorAll("tr"));
rows.sort(function(a,b) {
return convertDate(a.cells[0].innerHTML) - convertDate(b.cells[0].innerHTML);
});
rows.forEach(function(v) {
tbody.appendChild(v); // note that .appendChild() *moves* elements
});
}
document.querySelector("button").addEventListener("click", sortByDate);
<table id="results" width="360" border="1">
<thead>
<tr>
<th scope="col" width="120">Date Created</th>
<th scope="col" width="120">Name</th>
<th scope="col" width="120">Tests</th>
</tr>
</thead>
<tbody>
<tr>
<td>04/04/2015</td>
<td>Test Name 2</td>
<td>1</td>
</tr>
<tr>
<td>09/08/2017</td>
<td>Test Name 5</td>
<td>2</td>
</tr>
<tr>
<td>07/08/2015</td>
<td>Test Name 4</td>
<td>3</td>
</tr>
<tr>
<td>05/04/2015</td>
<td>Test Name 3</td>
<td>4</td>
</tr>
<tr>
<td>12/08/2017</td>
<td>Test Name 6</td>
<td>5</td>
</tr>
<tr>
<td>21/03/2014</td>
<td>Test Name 1</td>
<td>6</td>
</tr>
</tbody>
</table>
<button>Sort by date</button>
I have a JQuery Mobile responsive table. When resizing the browser window, more/less columns show up, so everything works fine.
http://jsfiddle.net/BamBamm/fe4ppftm/1/
<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="customerTable">
<thead>
<tr>
<th data-priority="6">customer ID</th>
<th>Customer name</th>
<th data-priority="1">First name</th>
<th data-priority="2">Address</th>
<th data-priority="3">City</th>
<th data-priority="4">PostalCode</th>
<th data-priority="5">Country</th>
</tr>
</thead>
<tbody id="customerTableBody">
<tr>
<td>10801</td>
<td>Some name</td>
<td>Some firt name</td>
<td>Some address</td>
<td>London</td>
<td>123456</td>
<td>United Kingdom</td>
</tr>
</tbody>
</table>
When I try to populate the table dynamically though, the responsive table is not responsive anymore when resizing the browser. I'm filling the table via setting the html code of the table body:
http://jsfiddle.net/BamBamm/e2ukzy5z/1/
tableBody = "<tr><td>10801</td> <td>Some name</td> <td>Some firt name</td> <td>Some address</td> <td>London</td> <td>123456</td> <td>United Kingdom</td> </tr>";
$('#customerTableBody').html(tableBody);
What should I do to make this work?
I think you have to call Refresh after you add new rows.
$('#customerTable').table( "refresh" )
https://github.com/jquery/jquery-mobile/issues/5570
I'm trying to implement Footable, a JQuery plugin used to make tables responsive. There is an add-on for Footable to add pagination. [Demo]
And (http://fooplugins.com/footable/demos/paging.htm) for using the pagination add-on. I tried following this demo but my pagination came up as a vertical un-ordered list. The buttons are functional but unsightly. Here is a link images which i can not post here because my repuation is not high enough.
Here is my code for the table:
<table class="table table-hover" ng-show='form.length>0' data-page-navigation=".pagination">
<thead>
<th ng-repeat="(key, formAttr) in form | orderBy:'attributes.order'" >{{formAttr.attributes.name}}<br/>({{formAttr.type}})</th>
<th>Submission Time</th>
</thead>
<tbody>
<tr ng-repeat="(key, response) in formResponses">
<td ng-repeat="(key, formAttr) in form | orderBy:'attributes.order'">{{$parent.response.results[formAttr.att_id]}}</td>
<td>{{response.submission_time}}</td>
</tr>
</tbody>
<tfoot class="">
<tr>
<td colspan="5">
<div class="pagination pagination-centered"></div>
</td>
</tr>
</tfoot>
</table>
Your footer should look something like this:
<tfoot class="hide-if-no-paging">
<tr>
<td colspan="5" class="text-center">
<ul class="pagination">
</ul>
</td>
</tr>
</tfoot>
You can tell, that's different that what it says in the demo. This link showed me the difference https://github.com/bradvin/FooTable/issues/136.
Here's a plunk to demonstrate the issue: http://plnkr.co/edit/8Yyk8NN8rsqdXtrvJDOM
You need to add both attribute for pagination:
data-page-navigation=".pagination" data-page-size="2" into table tag
(If not placing the pagination in the table footer) Don't use a CSS class for table-to-pagination relationships. Use CSS ID instead.
Consider the following...
BAD - Example using CSS class to relate pagination object to table:
<table id="table1" class="footable" data-page-navigation=".pagination" data-page-size="10">
<thead>
<th>Some Title</th>
<th>Some other Title</th>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some more data</td>
</tr>
</tbody>
</table>
<div class="pagination hide-if-no-paging"></div>
<table id="table2" class="footable" data-page-navigation=".pagination" data-page-size="10">
<thead>
<th>Some Title</th>
<th>Some other Title</th>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some more data</td>
</tr>
</tbody>
</table>
<div class="pagination hide-if-no-paging"></div>
The footable javascript code will see two pagination objects. Which will be used by table1 and which will be used by table2 is not deterministic. This throws the footable javascript into a tizzy.
Rather than use CSS classes, be more specific by using a CSS ID instead.
GOOD - Example using CSS ID to relate pagination object to table:
<table id="table1" class="footable" data-page-navigation="#pagination1" data-page-size="10">
<thead>
<th>Some Title</th>
<th>Some other Title</th>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some more data</td>
</tr>
</tbody>
</table>
<div id="pagination1" class="pagination hide-if-no-paging"></div>
<table id="table2" class="footable" data-page-navigation="#pagination2" data-page-size="10">
<thead>
<th>Some Title</th>
<th>Some other Title</th>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some more data</td>
</tr>
</tbody>
</table>
<div id="pagination2" class="pagination hide-if-no-paging"></div>
Javascript Example:
$(document).ready(function () {
$(".footable").footable();
});
Lets say I have the following table:
<table>
<thead>
<tr>
<th id="th_00"> </th>
<th id="th_01">TH 01</th>
<th id="th_02">TH 02</th>
<th id="th_03">TH 03</th>
<th id="th_04">TH 04</th>
</tr>
</thead>
<tbody>
<tr>
<th id="th_10">TH 10</th>
<td headers="th_01 th_10">DATA 11</td>
<td headers="th_02 th_10">DATA 12</td>
<td headers="th_03 th_10">DATA 13</td>
<td headers="th_04 th_10">DATA 14</td>
</tr>
<tr>
<th id="th_20">TH 20</th>
<td headers="th_01 th_20">DATA 21</td>
<td headers="th_02 th_20">DATA 22</td>
<td headers="th_03 th_20">DATA 23</td>
<td headers="th_04 th_20">DATA 24</td>
</tr>
</tbody>
</table>
Is there any native way using JavaScript or jQuery to find a specific cell of data using the headers attribute and the th tags id, or will I have to build the functionality myself?
I am currently using regular expressions and a jQuery('td', 'table tbody').each() loop to retrieve the specific cells I need to use, although this is less than ideal as it loops through each cell individually.
var td = $('td[headers="th_01 th_10"]');
perhaps?