I have a table i want to detect offset top of TR where is clicked this is working fine but after scroll page this is not working fine. Why after scroll offset().top is changed? How can fix it?
$(function() {
$('tr').click(function() {
offsetTop = $(this).offset().top;
console.log(offsetTop);
});
});
.myDiv {
overflow-y: auto;
height: 250px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="myDiv">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 1</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 2</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 3</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 4</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 5</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 6</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 7</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 8</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 9</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 10</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
You could always calculate the offset, factoring in the scroll position:
var offset_t = $(selector).offset().top - $(window).scrollTop();
var offset_l = $(selector).offset().left - $(window).scrollLeft();
Related
could someone help me with this block of code please.
I have a table that usually comes with more than 5 rows.
I want to show only 5 when loading the page, and when clicking on "SHOW MORE" show the rest, when clicking on "SHOW LESS" show only 5.
SHOW MORE and SHOW LESS must be the same button
Can someone help me. I started using Jquery, but I wanted to use pure JS
$("[id*='trid'] > tr").each(function(index) {
if (index >= 5) {
$(this).hide();
}
});
function mostrarRegistros() {
$("[id*='trid'] > tr").each(function(index) {
$(this).show();
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tbody id="trid">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John 3</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 4</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 5</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 6</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<br />
<br />
<br />
<button type="button" onclick="mostrarRegistros()">Show More/ Show Less</button>
Here is a solution using vanilla js, its one way to do it but could do it differently like attach the button dynamically which would simplify it abit.
If you have multiple tables use a class to define that the table should have reveal functionality, then grab all tables and pass in the element to a function which provides the functionality, then return the set of methods which can call on the buttons, using an id as an identifier.
const tableReveal = function(elm, options) {
// merge options
options = Object.assign({}, {
limit: 3
}, options)
// the tr's
let trs = elm.querySelectorAll('tbody tr')
// shown state
let shown
// funcs
const hide = () => {
trs.forEach((tr, index) => index >= options.limit ? tr.style.display = 'none' : '')
shown = false
}
const show = () => {
trs.forEach((tr) => tr.style.display = 'table-row')
shown = true
}
// initial state
hide()
// reveal funcs
return {
toggle: () => shown ? hide() : show(),
hide,
show
}
}
/**
* Usage:
* - For each over every table-reveal class, init reveal func and pass in element + options, return and assign table[id] for button
*/
let table = {}
document.querySelectorAll('.table-reveal').forEach(el => table[el.getAttribute('id')] = tableReveal(el, {
limit: 5
}))
<table style="width:100%" class="table-reveal" id="table-reveal-1">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John 3</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 4</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 5</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 6</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<button type="button" onclick="table['table-reveal-1'].toggle()">Show More / Show Less</button>
<table style="width:100%" class="table-reveal" id="table-reveal-2">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John 3</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 4</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 5</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 6</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<button type="button" onclick="table['table-reveal-2'].toggle()">Show More / Show Less</button>
And this is a solution from me on jquery, using the pseudo-classes :visble, which determines the visible tags of the tr, as well as the lt() selector to determine the minimum value of the rows in the table.
Also in my example, the button changes the text depending on the need to hide or show the text:
$('button').text('Show More');
and
$('button').text('Show Less');
$('#trid tr').hide();
$('#trid tr:lt(5)').show();
$('button').text('Show More');
function mostrarRegistros() {
if ($('#trid tr:visible').length <= 5) {
$('#trid tr').show();
$('button').text('Show Less');
} else {
$('#trid tr').hide();
$('#trid tr:lt(5)').show();
$('button').text('Show More');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tbody id="trid">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John 3</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 4</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 5</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 6</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<br />
<br />
<br />
<button type="button" onclick="mostrarRegistros()"></button>
I am loading an html file into a content div based on a click from a menu bar. The HTML contains 5 tables but for some reason the div only shows the first 5 lines of the first table, then you need a scroll bar to view the rest of the tables. I want to see all the tables on a single view and only have the scroll bars if the information exceeds the screen. Any suggestions would help. I have tried to set the width and height to 100% on the div but that did not work. When I view the table HTML alone it looks the way I want it to.
Thanks for any and all help.
function load_codes() {
document.getElementById("content").innerHTML = '<object type="text/html" data="codes2.html" ></object>';
}
function load_mrgsql() {
document.getElementById("content").innerHTML = '<object type="text/html" data="mergesqlcode.html" ></object>';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">
<h2>Sidebar</h2>
<p>Open Merge Analysis WorkBook</p>
<p>
Open Merge Analysis SQL file
</p>
<p>
Common Merge Code List
</p>
<p>Merge Analysis Statistics</p>
<p>My Statistics</p>
</div>
<div id="content" style="height: auto; width:auto; min-height:100%; display: block; overflow: auto;">
<h1>Merge Analysis Tracking</h1>
<p>Welcome to the Merge Analysis Tracking Tool</p>
<p>Look around</p>
</div>
<!-- HTML with Tables (only 2 shown) -->
<body>
<table class="table">
<thead>
<tr>
<th colspan="3">Case Close Codes</th>
</tr>
</thead>
<tr>
<td>BFU</td>
<td>BIOLOGICAL FATHER UNKNOWN</td>
</tr>
<tr>
<td>DGC</td>
<td>IV-D GOOD CAUSE</td>
</tr>
<tr>
<td>DNO</td>
<td>NCP DECEASED</td>
</tr>
<tr>
<td>ERR</td>
<td>CASE ENTERED IN ERROR</td>
</tr>
<tr>
<td>FOR</td>
<td>FOREIGN</td>
</tr>
<tr>
<td>INC</td>
<td>INCARCERATED, INSTITUTIONALIZED, MEDICAL</td>
</tr>
<tr>
<td>JNC</td>
<td>INITIATING JURISDICTION NON COOPERATION</td>
</tr>
<tr>
<td>LCO</td>
<td>LOCATE ONLY</td>
</tr>
<tr>
<td>LOC</td>
<td>LOSS OF CONTACT</td>
</tr>
<tr>
<td>NCA</td>
<td>NO CURRENT ORDER/ARREARS
<$500</td>
</tr>
<tr>
<td>NCO</td>
<td>NON-COOPERATION</td>
</tr>
<tr>
<td>P21</td>
<td>PATERNITY 21</td>
</tr>
<tr>
<td>PBI</td>
<td>PATERNITY BEST INTEREST</td>
</tr>
<tr>
<td>PEX</td>
<td>PATERNITY EXCLUDED</td>
</tr>
<tr>
<td>QLO</td>
<td>QUICK LOCATE ONLY</td>
</tr>
<tr>
<td>RSC</td>
<td>RECIPIENT OF SERVICES REQUEST CLOSURE</td>
</tr>
<tr>
<td>UL1</td>
<td>UNABLE TO LOCATE 1 YEAR</td>
</tr>
<tr>
<td>UL3</td>
<td>UNABLE TO LOCATE 3 YEARS</td>
</tr>
</table>
<table class="-table">
<thead>
<tr>
<th colspan="4">Relationship Codes</th>
</tr>
</thead>
<tr>
<td>01</td>
<td>SELF</td>
</tr>
<tr>
<td>02</td>
<td>SPOUSE</td>
</tr>
<tr>
<td>05</td>
<td>CHILD</td>
</tr>
<tr>
<td>06</td>
<td>GRANDCHILD</td>
</tr>
<tr>
<td>07</td>
<td>NEPHEW OR NIECE</td>
</tr>
<tr>
<td>08</td>
<td>SIBLING</td>
</tr>
<tr>
<td>09</td>
<td>FIRST OR SECOND COUSIN</td>
</tr>
<tr>
<td>10</td>
<td>OTHER RELATIVE</td>
</tr>
<tr>
<td>13</td>
<td>UNBORN</td>
</tr>
<tr>
<td>15</td>
<td>STEP CHILD</td>
</tr>
<tr>
<td>16</td>
<td>STEP GRANDCHILD</td>
</tr>
<tr>
<td>17</td>
<td>STEP NEPHEW OR NIECE</td>
</tr>
<tr>
<td>18</td>
<td>STEP BROTHER OR SISTER</td>
</tr>
<tr>
<td>19</td>
<td>OTHER SPECIFIED RELATIVE</td>
</tr>
<tr>
<td>20</td>
<td>ATTORNEY</td>
</tr>
<tr>
<td>27</td>
<td>OTHER</td>
</tr>
<tr>
<td>28</td>
<td>FATHER</td>
</tr>
<tr>
<td>29</td>
<td>ALLEGED FATHER</td>
</tr>
<tr>
<td>30</td>
<td>STEP FATHER</td>
</tr>
<tr>
<td>31</td>
<td>GRAND FATHER</td>
</tr>
<tr>
<td>32</td>
<td>MOTHER</td>
</tr>
<tr>
<td>33</td>
<td>STEP MOTHER</td>
</tr>
<tr>
<td>34</td>
<td>GRAND MOTHER</td>
</tr>
<tr>
<td>35</td>
<td>SISTER</td>
</tr>
<tr>
<td>35</td>
<td>SISTER</td>
</tr>
<tr>
<td>36</td>
<td>AGENCY</td>
</tr>
<tr>
<td>36</td>
<td>AGENCY</td>
</tr>
<tr>
<td>37</td>
<td>AUNT</td>
</tr>
<tr>
<td>37</td>
<td>AUNT</td>
</tr>
<tr>
<td>38</td>
<td>UNCLE</td>
</tr>
<tr>
<td>38</td>
<td>UNCLE</td>
</tr>
<tr>
<td>39</td>
<td>BROTHER</td>
</tr>
<tr>
<td>39</td>
<td>BROTHER</td>
</tr>
<tr>
<td>40</td>
<td>ADOPTED CHILD</td>
</tr>
<tr>
<td>40</td>
<td>ADOPTED CHILD</td>
</tr>
<tr>
<td>99</td>
<td>UNKNOWN</td>
</tr>
<tr>
<td>99</td>
<td>UNKNOWN</td>
</tr>
</table>
If I understand your question correctly, you want to make the object have it's full height and not display scrollbars, instead of the other way around.
If so, you should be able to do something like this:
function load_codes() {
let elem = document.getElementById("content")
elem.innerHTML = '<object type="text/html" data="codes2.html" ></object>';
elem.onload = function(e) {
elem.style.height = e.contentWindow.document.body.offsetHeight;
}
}
That should get what you need. You may need to do additional css to remove the object's borders.
In my table, the lines are form:
97.5%,
10/30,
41 RPM,
3.6 seconds,
$4750,
$100
If I set the type data-type = "number" in the rows everything is removed except for the numbers, but I need to be output completely as I wrote in the example.
How can I do what sorted by numeric values only? I think it can be realise through the JS, but I do not know it.
Regarding the second line, I want to be sorted by numbers before the character "/"
jQuery(function($) {
$('.table').footable();
});
body>table>thead>tr>th {
text-transform: capitalize;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table class="table" data-sorting="true">
<thead>
<tr>
<th data-breakpoints="xs" data-type="number">rank</th>
<th>weapon name</th>
<th data-type="number">damage</th>
<th data-breakpoints="xs" data-type="number" data-decimal-separator=".">armor pen</th>
<th data-breakpoints="xs sm" data-type="number">magazine capacity</th>
<th data-breakpoints="xs sm md" data-type="number">rate of fire</th>
<th data-breakpoints="xs sm md" data-type="number" data-decimal-separator=".">reload time</th>
<th data-breakpoints="xs sm md" data-type="number">price</th>
<th data-breakpoints="xs sm md" data-type="number">reward</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>AWP</td>
<td>115</td>
<td>97.5%</td>
<td>10/30</td>
<td>41 RPM</td>
<td>3.6 seconds</td>
<td>$4750</td>
<td>$100</td>
</tr>
<tr>
<td>2</td>
<td>*SCAR-20</td>
<td>80</td>
<td>82.5%</td>
<td>20/90</td>
<td>240 RPM</td>
<td>3.1 seconds</td>
<td>$5000</td>
<td>$300</td>
</tr>
<tr>
<td>3</td>
<td>*G3SG1</td>
<td>80</td>
<td>82.5%</td>
<td>20/90</td>
<td>240 RPM</td>
<td>4.7 seconds</td>
<td>$5000</td>
<td>$300</td>
</tr>
<tr>
<td>4</td>
<td>*Negev</td>
<td>35</td>
<td>75%</td>
<td>150/200</td>
<td>1000 RPM</td>
<td>5.7 seconds</td>
<td>$5700</td>
<td>$300</td>
</tr>
<tr>
<td>5</td>
<td>*M249</td>
<td>32</td>
<td>80%</td>
<td>100/200</td>
<td>750 RPM</td>
<td>5.7 seconds</td>
<td>$5200</td>
<td>$300</td>
</tr>
<tr>
<td>6</td>
<td>*SG 553</td>
<td>30</td>
<td>100%</td>
<td>30/90</td>
<td>666 RPM</td>
<td>2.8 seconds</td>
<td>$3000</td>
<td>$300</td>
</tr>
<tr>
<td>7</td>
<td>AK-47</td>
<td>36</td>
<td>77.5%</td>
<td>30/90</td>
<td>600 RPM</td>
<td>2.5 seconds</td>
<td>$2700</td>
<td>$300</td>
</tr>
<tr>
<td>8</td>
<td>M4A4</td>
<td>33</td>
<td>70%</td>
<td>30/90</td>
<td>666 RPM</td>
<td>3.1 seconds</td>
<td>$3100</td>
<td>$300</td>
</tr>
<tr>
<td>9</td>
<td>M4A1-S</td>
<td>33</td>
<td>70%</td>
<td>20/40</td>
<td>666 RPM</td>
<td>3.1 seconds</td>
<td>$3200</td>
<td>$300</td>
</tr>
<tr>
<td>10</td>
<td>*AUG</td>
<td>28</td>
<td>90%</td>
<td>30/90</td>
<td>666 RPM</td>
<td>3.8 seconds</td>
<td>$3300</td>
<td>$300</td>
</tr>
<tr>
<td>11</td>
<td>Galil AR</td>
<td>30</td>
<td>77.5%</td>
<td>35/90</td>
<td>666 RPM</td>
<td>3.0 seconds</td>
<td>$2000</td>
<td>$300</td>
</tr>
<tr>
<td>12</td>
<td>Famas</td>
<td>30</td>
<td>70%</td>
<td>25/90</td>
<td>666 RPM</td>
<td>3.3 seconds</td>
<td>$2250</td>
<td>$300</td>
</tr>
<tr>
<td>13</td>
<td>^P90</td>
<td>26</td>
<td>69%</td>
<td>50/100</td>
<td>857 RPM</td>
<td>3.3 seconds</td>
<td>$2350</td>
<td>$300</td>
</tr>
<tr>
<td>14</td>
<td>SSG 08</td>
<td>88</td>
<td>85%</td>
<td>10/90</td>
<td>48 RPM</td>
<td>3.7 seconds</td>
<td>$1700</td>
<td>$300</td>
</tr>
<tr>
<td>15</td>
<td>Mag-7</td>
<td>240</td>
<td>75%</td>
<td>5/32</td>
<td>71 RPM</td>
<td>2.4 seconds</td>
<td>$1800</td>
<td>$900</td>
</tr>
<tr>
<td>16</td>
<td>UMP-45</td>
<td>35</td>
<td>65%</td>
<td>25/100</td>
<td>666 RPM</td>
<td>3.5 seconds</td>
<td>$1200</td>
<td>$600</td>
</tr>
<tr>
<td>17</td>
<td>*XM1014</td>
<td>120</td>
<td>80%</td>
<td>7/32</td>
<td>240 RPM</td>
<td>4.5 seconds</td>
<td>$2000</td>
<td>$900</td>
</tr>
<tr>
<td>18</td>
<td>*PP-Bizon</td>
<td>27</td>
<td>57.5%</td>
<td>64/120</td>
<td>750 RPM</td>
<td>2.4 seconds</td>
<td>$1400</td>
<td>$600</td>
</tr>
<tr>
<td>19</td>
<td>*Nova</td>
<td>243</td>
<td>50%</td>
<td>8/32</td>
<td>68 RPM</td>
<td>5.6 seconds</td>
<td>$1200</td>
<td>$900</td>
</tr>
<tr>
<td>20</td>
<td>*MP7</td>
<td>29</td>
<td>62.5%</td>
<td>30/120</td>
<td>800 RPM</td>
<td>3.1 seconds</td>
<td>$1700</td>
<td>$600</td>
</tr>
<tr>
<td>21</td>
<td>*Mac 10</td>
<td>29</td>
<td>57.5%</td>
<td>30/100</td>
<td>800 RPM</td>
<td>2.6 seconds</td>
<td>$1050</td>
<td>$600</td>
</tr>
<tr>
<td>22</td>
<td>*MP9</td>
<td>26</td>
<td>60%</td>
<td>30/120</td>
<td>857 RPM</td>
<td>2.1 seconds</td>
<td>$1250</td>
<td>$600</td>
</tr>
<tr>
<td>23</td>
<td>*Sawed-Off</td>
<td>256</td>
<td>75%</td>
<td>7/32</td>
<td>71 RPM</td>
<td>5.0 seconds</td>
<td>$1200</td>
<td>$900</td>
</tr>
</tbody>
</table>
</body>
</html>
If above snippet won't work check this ---> Footable Sorting
You can use data-sort-value data attribute to manually set the value for sorting.
From Footable Sorting Doc
Cell options
sortValue : The value used by the component to perform
sorting operations.
To supply this option through data attributes you must specify the
attribute on the td element.
You can achieve this by either directly using data-sort-value inside a td or you can use javascript
1. Static Example
<table>
<tr>
<td data-sort-value="My Sort Value">...</td>
...
</tr>
...
</table>
2. Javascript Example
jQuery(function($){
$('.table').footable({
"rows": [{
"id": {
"options": {
"sortValue": "My Sort Value"
},
"value": ...
}
},{
...
}]
});
})
Below is the modified version of your snippet
jQuery(function($) {
$('.table').footable();
});
body>table>thead>tr>th {
text-transform: capitalize;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table class="table" data-sorting="true">
<thead>
<tr>
<th data-breakpoints="xs" data-type="number">rank</th>
<th>weapon name</th>
<th data-type="number">damage</th>
<th data-breakpoints="xs" data-type="number" data-decimal-separator=".">armor pen</th>
<th data-breakpoints="xs sm">magazine capacity</th>
<th data-breakpoints="xs sm md">rate of fire</th>
<th data-breakpoints="xs sm md" data-type="number" data-decimal-separator=".">reload time</th>
<th data-breakpoints="xs sm md">price</th>
<th data-breakpoints="xs sm md">reward</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>AWP</td>
<td>115</td>
<td data-sort-value="97.5">97.5%</td>
<td data-sort-value="10">10/30</td>
<td data-sort-value="41">41 RPM</td>
<td data-sort-value="3.6">3.6 seconds</td>
<td data-sort-value="4750">$4750</td>
<td data-sort-value="100">$100</td>
</tr>
<tr>
<td>2</td>
<td>*SCAR-20</td>
<td>80</td>
<td data-sort-value="82.5">82.5%</td>
<td data-sort-value="20">20/90</td>
<td data-sort-value="240">240 RPM</td>
<td data-sort-value="3.1">3.1 seconds</td>
<td data-sort-value="5000">$5000</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>3</td>
<td>*G3SG1</td>
<td>80</td>
<td data-sort-value="82.5">82.5%</td>
<td data-sort-value="20">20/90</td>
<td data-sort-value="240">240 RPM</td>
<td data-sort-value="4.7">4.7 seconds</td>
<td data-sort-value="5000">$5000</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>4</td>
<td>*Negev</td>
<td>35</td>
<td data-sort-value="75">75%</td>
<td data-sort-value="150">150/200</td>
<td data-sort-value="1000">1000 RPM</td>
<td data-sort-value="5.7">5.7 seconds</td>
<td data-sort-value="5700">$5700</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>5</td>
<td>*M249</td>
<td>32</td>
<td data-sort-value="80">80%</td>
<td data-sort-value="100">100/200</td>
<td data-sort-value="750">750 RPM</td>
<td data-sort-value="5.7">5.7 seconds</td>
<td data-sort-value="5200">$5200</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>6</td>
<td>*SG 553</td>
<td>30</td>
<td data-sort-value="100">100%</td>
<td data-sort-value="30">30/90</td>
<td data-sort-value="666">666 RPM</td>
<td data-sort-value="2.8">2.8 seconds</td>
<td data-sort-value="3000">$3000</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>7</td>
<td>AK-47</td>
<td>36</td>
<td data-sort-value="77.5">77.5%</td>
<td data-sort-value="30">30/90</td>
<td data-sort-value="600">600 RPM</td>
<td data-sort-value="2.5">2.5 seconds</td>
<td data-sort-value="2700">$2700</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>8</td>
<td>M4A4</td>
<td>33</td>
<td data-sort-value="70">70%</td>
<td data-sort-value="30">30/90</td>
<td data-sort-value="666">666 RPM</td>
<td data-sort-value="3.1">3.1 seconds</td>
<td data-sort-value="3100">$3100</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>9</td>
<td>M4A1-S</td>
<td>33</td>
<td data-sort-value="70">70%</td>
<td data-sort-value="20">20/40</td>
<td data-sort-value="666">666 RPM</td>
<td data-sort-value="3.1">3.1 seconds</td>
<td data-sort-value="3200">$3200</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>10</td>
<td>*AUG</td>
<td>28</td>
<td data-sort-value="90">90%</td>
<td data-sort-value="30">30/90</td>
<td data-sort-value="666">666 RPM</td>
<td data-sort-value="3.8">3.8 seconds</td>
<td data-sort-value="3300">$3300</td>
<td data-sort-value="300">$300</td>
</tr>
</tbody>
</table>
</body>
</html>
If above snippet won't work, try this ---> Sorting using Footable
I have made table which has sorting option also it has pagination. But the problem it has only Next, Last, Previous and First. I want it also should have page number displaying on which page it is and the total number of pages.
I tried getting the button of page number by adding it but the problem is that on clicking them it won't go the page. Actually I copied the pagination from somewhere so I am not able to do it properly.
The working code is here
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.js"></script>
<script type="text/javascript" src="http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="http://tablesorter.com/docs/js/chili/chili-1.8b.js"></script>
<script type="text/javascript" src="http://tablesorter.com/docs/js/docs.js"></script>
<script type="text/javascript" src="http://flaviusmatis.github.io/simplePagination.js/jquery.simplePagination.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("table")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $(".tablesorter")});
});
</script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table id="myTable" class="" style="width:50%">
<thead>
<tr>
<th><span>ID</span></th>
<th><span>Name</span></th>
<tr>
<tbody>
<td>1</td>
<td>Jill</td>
</tr>
<tr>
<td>2</td>
<td>Bill</td>
</tr>
<tr>
<td>3</td>
<td>Chill</td>
</tr>
<tr>
<td>4</td>
<td>Adam</td>
</tr>
<tr>
<td>5</td>
<td>Andrea</td>
</tr>
<tr>
<td>6</td>
<td>Stephen</td>
</tr>
<tr>
<td>7</td>
<td>Rose</td>
</tr>
<tr>
<td>8</td>
<td>Chuck</td>
</tr>
<tr>
<td>9</td>
<td>Barney</td>
</tr>
<tr>
<td>10</td>
<td>Alan</td>
</tr>
<tr>
<td>11</td>
<td>Ted</td>
</tr>
<tr>
<td>12</td>
<td >Simon</td>
</tr>
<tr>
<td>13</td>
<td >Simon</td>
</tr>
<tr>
<td>14</td>
<td >Larry</td>
</tr>
<tr>
<td>15</td>
<td >Harry</td>
</tr>
<tr>
<td>16</td>
<td >Ron</td>
</tr>
<tr>
<td>17</td>
<td>George</td>
</tr>
<td >18</td>
<td>John</td>
</tr>
<tr>
<td>19</td>
<td>Jay</td>
</tr>
<tr>
<td>20</td>
<td>Laura</td>
</tr>
<tr>
<td>21</td>
<td>Michael</td>
</tr>
<tr>
<td>22</td>
<td>George</td>
</tr>
<td >23</td>
<td>John</td>
</tr>
<tr>
<td>24</td>
<td>Jay</td>
</tr>
<tr>
<td>25</td>
<td>Laura</td>
</tr>
<tr>
<td>26</td>
<td>Michael</td>
</tr>
<tr>
<td>27</td>
<td>George</td>
</tr>
<td >28</td>
<td>John</td>
</tr>
<tr>
<td>29</td>
<td>Jay</td>
</tr>
<tr>
<td>30</td>
<td>Laura</td>
</tr>
<tr>
<td>31</td>
<td>Michael</td>
</tr>
<tr>
<td>32</td>
<td>George</td>
</tr>
<td >33</td>
<td>John</td>
</tr>
<tr>
<td>34</td>
<td>Jay</td>
</tr>
<tr>
<td>35</td>
<td>Laura</td>
</tr>
<tr>
<td>36</td>
<td>Michael</td>
</tr>
<tr>
<td>37</td>
<td>George</td>
</tr>
<td >38</td>
<td>John</td>
</tr>
<tr>
<td>39</td>
<td>Jay</td>
</tr>
<tr>
<td>40</td>
<td>Laura</td>
</tr>
<tr>
<td>41</td>
<td>Michael</td>
</tr>
<tr>
<td>42</td>
<td>George</td>
</tr>
<td >43</td>
<td>John</td>
</tr>
<tr>
<td>44</td>
<td>Jay</td>
</tr>
<tr>
<td>45</td>
<td>Laura</td>
</tr>
<tr>
<td>46</td>
<td>Michael</td>
</tr>
<tr>
<td>47</td>
<td>George</td>
</tr>
<td >48</td>
<td>John</td>
</tr>
<tr>
<td>49</td>
<td>Jay</td>
</tr>
<tr>
<td>50</td>
<td>Laura</td>
</tr>
<tr>
<td>51</td>
<td>Michael</td>
</tr>
<tr>
<td>52</td>
<td>George</td>
</tr>
<td >53</td>
<td>John</td>
</tr>
<tr>
<td>54</td>
<td>Jay</td>
</tr>
<tr>
<td>55</td>
<td>Laura</td>
</tr>
<tr>
<td>56</td>
<td>Michael</td>
</tr>
<tr>
<td>57</td>
<td>George</td>
</tr>
<td >58</td>
<td>John</td>
</tr>
<tr>
<td>59</td>
<td>Jay</td>
</tr>
<tr>
<td>60</td>
<td>Laura</td>
</tr>
<tr>
<td>61</td>
<td>Michael</td>
</tr>
<tr>
<td>62</td>
<td>George</td>
</tr>
<tr>
<td >63</td>
<td>John</td>
</tr>
<tr>
<td>64</td>
<td>Jay</td>
</tr>
<tr>
<td>65</td>
<td>Laura</td>
</tr>
<tr>
<td>66</td>
<td>Michael</td>
</tr>
<tr>
<td>67</td>
<td>George</td>
</tr>
<td >68</td>
<td>John</td>
</tr>
<tr>
<td>69</td>
<td>Jay</td>
</tr>
<tr>
<td>70</td>
<td>Laura</td>
</tr>
<tr>
<td>71</td>
<td>Michael</td>
</tr>
<tr>
<td >72</td>
<td>John</td>
</tr>
<tr>
<td>73</td>
<td>Jay</td>
</tr>
<tr>
<td>74</td>
<td>Jay</td>
</tr>
<tr>
<td>75</td>
<td>Laura</td>
</tr>
<tr>
<td>76</td>
<td>Michael</td>
</tr>
<tr>
<td>77</td>
<td>George</td>
</tr>
<td >78</td>
<td>John</td>
</tr>
<tr>
<td>79</td>
<td>Jay</td>
</tr>
<tr>
<td>80</td>
<td>Laura</td>
</tr>
<tr>
<td>81</td>
<td>Michael</td>
</tr>
<tr>
<td >82</td>
<td>John</td>
</tr>
<tr>
<td >83</td>
<td>John</td>
</tr>
<tr>
<td>84</td>
<td>Jay</td>
</tr>
<tr>
<td>85</td>
<td>Laura</td>
</tr>
<tr>
<td>86</td>
<td>Michael</td>
</tr>
<tr>
<td>87</td>
<td>George</td>
</tr>
<td >88</td>
<td>John</td>
</tr>
<tr>
<td>89</td>
<td>Jay</td>
</tr>
<tr>
<td>90</td>
<td>Laura</td>
</tr>
<tr>
<td>91</td>
<td>Michael</td>
</tr>
<tr>
<td>92</td>
<td>Michael</td>
</tr>
<tr>
<td >93</td>
<td>John</td>
</tr>
<tr>
<td>94</td>
<td>Jay</td>
</tr>
<tr>
<td>95</td>
<td>Laura</td>
</tr>
<tr>
<td>96</td>
<td>Michael</td>
</tr>
<tr>
<td>97</td>
<td>George</td>
</tr>
<td >98</td>
<td>John</td>
</tr>
<tr>
<td>99</td>
<td>Jay</td>
</tr>
<tr>
<td>100</td>
<td>Laura</td>
</tr>
</tbody>
</table>
<div id="pager" class="tablesorter" style="top: 900px; position: absolute;">
<form>
<img src="http://tablesorter.com/addons/pager/icons/first.png" class="first">
<img src="http://tablesorter.com/addons/pager/icons/prev.png" class="prev">
<img src="http://tablesorter.com/addons/pager/icons/next.png" class="next">
<img src="http://tablesorter.com/addons/pager/icons/last.png" class="last">
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
</select>
</form>
</div>
</body>
</html>
Please help me...
In a function I need to pass a arr. I want to remove all columns of html table.
Not sure how to do this.
I tried this, but not working:
<table>
<thead>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
<td>c1</td>
<td>d1</td>
<td>e1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3</td>
<td>e3</td>
</tr>
</tbody>
</table>
and in javascript I have a variable:
var arr=[0,2,3];
I want to remove all columns and its data from table on specified so output will be:
<table>
<thead>
<tr>
<td>b</td>
<td>e</td>
</tr>
</thead>
<tbody>
<tr>
<td>b1</td>
<td>e1</td>
</tr>
<tr>
<td>b2</td>
<td>e2</td>
</tr>
<tr>
<td>b3</td>
<td>e3</td>
</tr>
</tbody>
</table>
You can use the array to create a filter for tds to be deleted as given below
var arr = [0, 2, 3];
var filters = arr.map(function(val) {
return 'td:nth-child(' + (val + 1) + ')';
});
$('table').find(filters.join()).remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
<td>c1</td>
<td>d1</td>
<td>e1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3</td>
<td>e3</td>
</tr>
</tbody>