How to enumerate dates between two dates with moment JS - javascript

Currently using the Bootstrap Table library by wenzhixin. I'm trying to find a way to set up a filter that use the data range principle.
This code "https://jsfiddle.net/wenyi/06pg2wms/11/" is working fine but it doesn't work when the format of date (in the bootstrap table) is like this : YYY-MM-DD HH:mm:ss.
Does someone know a way to solve this ?
Code works with this type of date format :
<tr id="tr-id-1" class="tr-class-1">
<td id="td-id-1" class="td-class-1">2019-02-01</td>
<td>0</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td id="td-id-2" class="td-class-2">2019-02-02</td>
<td>1</td>
</tr>
<tr id="tr-id-3" class="tr-class-3">
<td id="td-id-3" class="td-class-3">2019-02-03</td>
<td>2</td>
</tr>
But I want something that work with these dates format :
<tr id="tr-id-1" class="tr-class-1">
<td id="td-id-1" class="td-class-1">2019-02-01 13:21:30</td>
<td>0</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td id="td-id-2" class="td-class-2">2019-02-02 15:23:11</td>
<td>1</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td id="td-id-2" class="td-class-2">2019-02-02 15:23:11</td>
<td>1</td>
</tr>
<tr id="tr-id-3" class="tr-class-3">
<td id="td-id-3" class="td-class-3">2019-02-03 20:21:43</td>
<td>2</td>
</tr>
<tr id="tr-id-3" class="tr-class-3">
<td id="td-id-3" class="td-class-3">2019-02-03 20:21:43</td>
<td>2</td>
</tr>

Javascript code :
$(function()
{
$('#table').bootstrapTable()
}
)
//Moment.JS Return Date Ranges
function getDates(startDate, stopDate) {
var dateArray = [];
var currentDate = moment(startDate);
var stopDate = moment(stopDate);
while (currentDate <= stopDate) {
dateArray.push( moment(currentDate).format('YYYY-MM-DD'))
currentDate = moment(currentDate).add(1, 'days');
}
return dateArray;
}
$('#ok').click( function()
{
var $table = $('#table')
var from=$("input[type=date][name=date1]" ).val();
var to=$("input[type=date][name=date2]" ).val();
$table.bootstrapTable('filterBy',{ ETA: getDates(from,to)})
})
HTML code :
<div id="toolbar">
<div class="form-inline" role="form">
<div class="form-group">
<span>From Date </span>
<input name="date1" class="form-control w70" type="date" >
</div>
<div class="form-group">
<span>To Date </span>
<input name="date2" class="form-control w70" type="date">
</div>
<button id="ok" type="submit" class="btn btn-primary">OK</button>
</div>
</div>
<table id="table" data-toggle="table" data-toolbar="#toolbar" >
<thead>
<tr>
<th data-field="ETA">Date</th>
<th data-field="number">Number</th>
</tr>
</thead>
<tbody>
<tr id="tr-id-1" class="tr-class-1">
<td id="td-id-1" class="td-class-1">2019-02-01</td>
<td>0</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td id="td-id-2" class="td-class-2">2019-02-02</td>
<td>1</td>
</tr>
<tr id="tr-id-3" class="tr-class-3">
<td id="td-id-3" class="td-class-3">2019-02-03</td>
<td>2</td>
</tr>
<tr id="tr-id-4" class="tr-class-4">
<td id="td-id-4" class="td-class-4">2019-02-04</td>
<td>3</td>
</tr>
<tr id="tr-id-5" class="tr-class-5">
<td id="td-id-5" class="td-class-5">2019-02-05</td>
<td>4</td>
</tr>
<tr id="tr-id-6" class="tr-class-6">
<td id="td-id-6" class="td-class-6">2019-02-06</td>
<td>5</td>
</tr>
<tr id="tr-id-7" class="tr-class-7">
<td id="td-id-7" class="td-class-7">2019-02-07</td>
<td>6</td>
</tr>
<tr id="tr-id-8" class="tr-class-8">
<td id="td-id-8" class="td-class-8">2019-02-08</td>
<td>7</td>
</tr>
<tr id="tr-id-9" class="tr-class-9">
<td id="td-id-9" class="td-class-9">2019-02-09</td>
<td>8</td>
</tr>
<tr id="tr-id-10" class="tr-class-10">
<td id="td-id-10" class="td-class-10">2019-02-10</td>
<td>9</td>
</tr>
</tbody>
</table>

Related

How to show table rows between two days?

I have a table. I want to show only table rows which match between two days
<table id ="Table">
<thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td> 20-06-2019</td>
<td> Payment </td>
<td >ajay </td>
<td>By cash</td>
</tr>
<tr>
<td>21-06-2019</td>
<td> Payment </td>
<td>ajay</td>
<td>By Cash</td>
</tr>
<tr>
<td>22-06-2019</td>
<td>Payment </td>
<td>ajay </td>
<td>Tran</td>
</tr>
<tr>
<td>23-06-2019</td>
<td> Payment </td>
<td class="table_account capitalize">ajay </td>
<td>By cash</td>
</tr>
</tbody>
</table>
I want to show rows between date 20-6-2019 to 22-6-2019.
20-6-2019 |Payment | Ajay | By cash|
21-6-2019 |Payment | Ajay |By cash |
22-6-2019 |Payment | Ajay |Tran |
As your data is getting from server , you should hidden table first by css . Then get data and send to javascript function as param I test with displayInterval as below
function displayInterval(from, to) {
$("#Table tbody tr td:first-child").each(function() {
var curDate = setJsDate($(this).html());
var froms =setJsDate(from);
var tos = setJsDate(to);
if(curDate >= froms && curDate <= tos) {
} else {
$(this).parent().hide();
}
});
$("#Table tbody").show();
}
function setJsDate(d) {
if(typeof d == "number" || typeof d == "undefined") return;
var pattern = d.split('-');
var dt = new Date(pattern[2]+"-"+pattern[1] + "-"+pattern[0]);
return dt.getTime();
}
displayInterval('20-06-2019','22-06-2019');
#Table tbody {
display : none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id ="Table">
<thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td>20-06-2019</td>
<td> Payment </td>
<td >ajay </td>
<td>By cash</td>
</tr>
<tr>
<td>21-06-2019</td>
<td> Payment </td>
<td>ajay</td>
<td>By Cash</td>
</tr>
<tr>
<td>22-06-2019</td>
<td>Payment </td>
<td>ajay </td>
<td>Tran</td>
</tr>
<tr>
<td>23-06-2019</td>
<td> Payment </td>
<td class="table_account capitalize">ajay </td>
<td>By cash</td>
</tr>
</tbody>
</table>
<table id ="Table">
<thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td> 20-06-2019</td>
<td> Payment </td>
<td >ajay </td>
<td>By cash</td>
</tr>
<tr>
<td>21-06-2019</td>
<td> Payment </td>
<td>ajay</td>
<td>By Cash</td>
</tr>
<tr>
<td>22-06-2019</td>
<td>Payment </td>
<td>ajay </td>
<td>Tran</td>
</tr>
</tbody>
</table>

Use custom sort to sort a html table with time in HH:MM:SS format

I tried tablesorter to sort the time in HH:MM:SS format .But I need a customizable sort to split and sort the time even if the time is varying by minuts or seconds
HTML table sort using Javascript.
HTML :
<table class="table-bordered" border="1">
<thead>
<tr class="Headers">
<th>Number</th>
<th>Date start
</th>
<th>Date end</th>
</tr>
</thead>
<tbody>
<tr class="Entries" data-id="13">
<td data-field-type="string">1234</td>
<td data-field-type="date">01-04-2015</td>
<td data-field-type="date">01-04-2015</td>
</tr>
<tr class="Entries" data-id="24">
<td data-field-type="string">1352</td>
<td data-field-type="date">04-10-2012</td>
<td data-field-type="date">23-10-2015</td>
</tr>
<tr class="Entries" data-id="8">
<td data-field-type="string">1124</td>
<td data-field-type="date">13-05-2014</td>
<td data-field-type="date">01-04-2015</td>
</tr>
<tr class="Entries" data-id="23">
<td data-field-type="string">1652</td>
<td data-field-type="date">07-11-2013</td>
<td data-field-type="date">22-10-2015</td>
</tr>
<tr class="Entries" data-id="23">
<td data-field-type="string">1652</td>
<td data-field-type="date">04-12-2013</td>
<td data-field-type="date">22-10-2015</td>
</tr>
</tbody>
</table>
Javascript :
$('tr.Entries').each(function() {
var $this = $(this),
t = this.cells[1].textContent.split('-');
$this.data('_ts', new Date(t[2], t[1]-1, t[0]).getTime());
}).sort(function (a, b) {
return $(a).data('_ts') > $(b).data('_ts');
}).appendTo('tbody');
Try it here

Jsonp request refuses to work

I got the following code:
var url = 'https://lottery.lafunda.com.do/Lottery/WinningNumbers?key=664cf843-8904-4212-9503-d4733651f519&gobackdays=2&grouped=true&language=es-DO&callback=generateTicker';
$.ajax({
url: url,
accept: "application/javascript",
dataType: "jsonp"
});
function generateTicker(returndata) {
console.log(returndata);
}
But nothing happens. In the console Im getting this message:
"Resource interpreted as Script but transferred with MIME type text/html"
Here is JSfiddle: http://jsfiddle.net/8k8souqj/
Thanks in advance.
EDIT:
Most of you are pointing out the URL does not return valid json. But if I use a modify header extension for chrome and accept "application/javascript" as a header I do get valid javascript:
generateTicker([{"HouseAbbreviation":"LIL","ClosesOn":"2014-10-15T02:10:00","HouseName":"Illinois Noche","Drawings":[{"HouseAbbreviation":"LIL","HouseName":"Illinois Noche","ClosesOn":"2014-10-15T02:10:00","BallCount":2,"PostedNumbers":"3-0"},{"HouseAbbreviation":"LIL","HouseName":"Illinois Noche","ClosesOn":"2014-10-15T02:10:00","BallCount":3,"PostedNumbers":"6-3-0"}... etc
EDIT 2:
Apparently the problem is that jsonp cannot use modified headers as this is not possible via the script tag. Hence the URL will always return html. Thanks to all
That code fetches an HTML page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Winning Numbers</title>
<link rel="stylesheet" type="text/css" href="/assets/css/webordertaker.css" />
<link rel="stylesheet" type="text/css" href="/Content/css/select2.css" />
<script type="text/javascript" src="/Scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/Scripts/select2.min.js"></script>
<script type="text/javascript" src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body id="winningNumbersView">
<div id="layoutContainer">
<h2>Números Ganadores</h2>
<table class="table" id="winningNumbersTable">
<thead>
<tr>
<th>Fecha</th>
<th>Casa</th>
<th>Números</th>
</tr>
</thead>
<tbody>
<tr>
<td>14/10/14</td>
<td>LIL Illinois Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>3-0</td>
<td>6-3-0</td>
<td>7-9-2-2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>NPR Puerto Rico Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>3-5</td>
<td>4-3-5</td>
<td>0-9-6-3</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>LFL Florida Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>4-1</td>
<td>3-4-1</td>
<td>9-9-7-6</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>LNJ Nueva Jersey Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>3-9</td>
<td>1-3-9</td>
<td>9-9-6-4</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>LNY Nueva York Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>7-6</td>
<td>8-7-6</td>
<td>6-1-1-4</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>LNYMAR Marriage NY Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>76-61-14</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>LNYBOR Borlette NY Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>76-61-14</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>DPR Puerto Rico Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>9-3</td>
<td>5-9-3</td>
<td>6-4-6-4</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>EIL Illinois Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>9-6</td>
<td>0-9-6</td>
<td>1-4-4-4</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>EFL Florida Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>5-2</td>
<td>2-5-2</td>
<td>3-9-2-3</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>ENJ Nueva Jersey Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>3-2</td>
<td>1-3-2</td>
<td>6-8-7-2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>ENYMAR Marriage NY Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>85-02-78</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>ENYBOR Borlette NY Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>85-02-78</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>ENY Nueva York Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>8-5</td>
<td>6-8-5</td>
<td>0-2-7-8</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>LIL Illinois Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>2-8</td>
<td>8-2-8</td>
<td>0-1-3-4</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>LFL Florida Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>6-5</td>
<td>0-6-5</td>
<td>5-0-8-2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>NPR Puerto Rico Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>5-6</td>
<td>4-5-6</td>
<td>9-4-1-0</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>LNJ Nueva Jersey Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>7-5</td>
<td>4-7-5</td>
<td>7-1-1-8</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>LNYMAR Marriage NY Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>71-62-44</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>LNYBOR Borlette NY Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>71-62-44</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>LNY Nueva York Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>7-1</td>
<td>2-7-1</td>
<td>6-2-4-4</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>DPR Puerto Rico Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>7-5</td>
<td>0-7-5</td>
<td>5-2-6-0</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>EIL Illinois Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>9-8</td>
<td>0-9-8</td>
<td>8-1-5-9</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>EFL Florida Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>5-5</td>
<td>9-5-5</td>
<td>2-6-6-8</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>ENJ Nueva Jersey Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>0-0</td>
<td>5-0-0</td>
<td>0-7-2-7</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>ENY Nueva York Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>8-4</td>
<td>1-8-4</td>
<td>3-2-9-9</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>ENYMAR Marriage NY Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>84-32-99</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>ENYBOR Borlette NY Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>84-32-99</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="/Scripts/iframeResizer.contentWindow.js"></script>
</body>
</html>
...but HTML is not valid JSONP.
The callback will never work this way. You will have to add your callback to you ajax request.
var url = 'https://lottery.lafunda.com.do/Lottery/WinningNumbers?key=664cf843-8904-4212-9503-d4733651f519&gobackdays=2&grouped=true&language=es-DO&callback=generateTicker';
$.ajax({
url: url,
accept: "application/javascript",
dataType: "jsonp",
success: generateTicker
});
function generateTicker(returndata) {
console.log(returndata);
}
Your issue is the combination of the two errors, as Jerodev mention, the way you call callback method won't work, and also, what you mentioned the way you send the accept header is not proper either
The following should work
$.ajax({
headers: {
Accept: "application/javascript"
},
url: url,
data: "jsonp",
success : generateTicker
})
function generateTicker(returndata) {
console.log(returndata);
}
The working fiddle
http://jsfiddle.net/8k8souqj/13/

How to retrive specific row from html table equal of something by jquery

I have a table dynamically generated by php. In this table have information for different semester (such as : first, second, third etc). Now i want to show specific semester information if user click a link from same table without a query. I am newbie in this forum and its my first question. sorry for poor english. !
My code
<table id="course_offering" class="table table-striped table-hover custab ">
<thead>
<tr>
<th>Course Code</th>
<th>Course title</th>
<th>Credit Hours</th>
<th>Contact Hours</th>
<th>Pre Requisite</th>
<th>Course Type</th>
<th>Year</th>
<th>Semester</th>
<th>Offering Year</th>
<th>Offering Session</th>
</tr>
</thead>
<tbody>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>1</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2015</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
</tbody>
</table>
here is a working example:
http://jsfiddle.net/K7PjR/1/
function getRowsByText(text) {
var resultRows = $();
$('tr').each(function () {
var row = $(this);
var rowText = row.text().trim();
if (rowText === text) {
resultRows = resultRows.add(row); //return the row
}
});
return resultRows;
}
getRowsByText('apple').css('color', 'red');
getRowsByText('orange').css('color', 'orange');
HTML:
<table>
<tr>
<td>apple</td>
</tr>
<tr>
<td>orange</td>
</tr>
<tr>
<td>bannana</td>
</tr>

Sort Table Rows according to table data

For example, I have a code:
<table>
<tr>
<th>name</td>
<th>price</td>
</tr>
<tr>
<td>a</td>
<td class="sort">5</td>
</tr>
<tr>
<td>b</td>
<td class="sort">3</td>
</tr>
<tr>
<td>c</td>
<td class="sort">8</td>
</tr>
<tr>
<td>c</td>
<td class="sort"></td>
</tr>
<tr>
<td>h</td>
<td class="sort">2</td>
</tr>
<tr>
<td>p</td>
<td class="sort">6</td>
</tr>
<tr>
<td>b</td>
<td class="sort">20</td>
</tr>
<tr>
<td>b</td>
<td class="sort"></td>
</tr>
</table>
I want this to be sorted like this:
<table>
<tr>
<th>name</td>
<th>price</td>
</tr>
<tr>
<td>h</td>
<td class="sort">2</td>
</tr>
<tr>
<td>b</td>
<td class="sort">3</td>
</tr>
<tr>
<td>a</td>
<td class="sort">5</td>
</tr>
<tr>
<td>p</td>
<td class="sort">6</td>
</tr>
<tr>
<td>c</td>
<td class="sort">8</td>
</tr>
<tr>
<td>b</td>
<td class="sort">20</td>
</tr>
<tr>
<td>c</td>
<td class="sort"></td>
</tr>
<tr>
<td>b</td>
<td class="sort"></td>
</tr>
</table>
I used this code:
function sortNum(a, b) {
return 1 * $(a).find('.sort').text() < 1 * $(b).find('.price').text() ? 0 : 1;
}
function sortTheTable(){
$(function() {
var elems = $.makeArray($('tr:has(.price)').remove())
elems.sort(sortNum)
$('table#information').append($(elems));
});
}
this works but, the problem is, the output is like this:
<table>
<tr>
<th>name</td>
<th>price</td>
</tr>
<tr>
<td>c</td>
<td class="sort"></td>
</tr>
<tr>
<td>b</td>
<td class="sort"></td>
</tr>
<tr>
<td>h</td>
<td class="sort">2</td>
</tr>
<tr>
<td>b</td>
<td class="sort">3</td>
</tr>
<tr>
<td>a</td>
<td class="sort">5</td>
</tr>
<tr>
<td>p</td>
<td class="sort">6</td>
</tr>
<tr>
<td>c</td>
<td class="sort">8</td>
</tr>
<tr>
<td>b</td>
<td class="sort">20</td>
</tr>
</table>
The empty one goes to top. I want the empty ones in the bottom.
Thanks
Instead of
return 1 * $(a).find('.sort').text() < 1 * $(b).find('.sort').text() ? 1 : 0;
insert
return 1 * $(a).find('.sort').text() < 1 * $(b).find('.price').text() ? 0 : 1;
http://jsfiddle.net/E56j8/
You have number of plugins to sort it why are you reinventing the wheel.
Here is one such plugin
Link
<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>
$("#myTable").tablesorter();
Have a look at Sorting - we're doing it wrong. A simple jQuery plugin for sorting stuff is available here.
some notes on your code:
// you're binding a document ready event within a function call?
// looks the wrong way 'round, to me
function sortTheTable(){
$(function() {
// 1) you probably want to use .detach() over .remove()
// 2) "tr:has(.price)" will match ALL table rows
// containing an element with the class .price
// even if they're children of different <table>s!
// 3) $('.selector') is already "an array", at least it's sortable right away.
// there's no need for $.makeArray() here
var elems = $.makeArray($('tr:has(.price)').remove())
elems.sort(sortNum)
// "#information" is a sufficient (and more efficient) selector,
$('table#information').append($(elems));
});
}

Categories

Resources