is there a way I can lock/make the header of the table component stick and only allow the rows to scroll?
One way I normally solve this problem is by using a Sticky Method, like this
There is a MAJOR con to this though, Sticky isn't supported by IE6-IE10
Check out the support here, to see if you would be interested in using this
I am currently looking into different ways.
enter link description here
table
{
Position: relative;
width: 100%;
text-align: center;
}
thead, th
{
background: black;
color: white;
border: none;
margin: 0;
padding: 0;
position: sticky;
top: 0;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>State</th>
<th>Employeed</th>
</tr>
</thead>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<table>
Related
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();
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>