I have a table with two columns - row number and name
The table has to be sortable by user (using drag and drop).
Here is html of table:
<table class="table table-striped sorted_table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
</tr>
</thead>
<tbody id="tbody-list">
<tr>
<td class='td-index'>1</td>
<td>Frank</td>
</tr>
<tr>
<td class='td-index'>2</td>
<td>Bill</td>
</tr>
<tr>
<td class='td-index'>3</td>
<td>John</td>
</tr>
<tr>
<td class='td-index'>4</td>
<td>David</td>
</tr>
<tr>
<td class='td-index'>5</td>
<td>Elisa</td>
</tr>
<tr>
<td class='td-index'>6</td>
<td>Anna</td>
</tr>
</tbody>
</table>
Here is jquery for sorting (drag and drop):
$('.sorted_table').sortable({
containerSelector: 'table',
itemPath: '> tbody',
itemSelector: 'tr',
placeholder: '<tr class="placeholder"/>',
update: function( event, ui) {
$('.td-index').each(function(index ) {
index++;
$(this).text(index );
})
}
})
I used update callback function of sorting() to regenerate the number of the each row after every sorting - but it doesn't
What callback function should I use?
try beforeStop or stop instead of update
Related
This is My Table; I want to show only first 3 columns to User but I want to export all data to Excel. First how can I hide the columns based on the header text ?
<table id="ibms" class="table table-bordered">
<thead>
<tr>
<th>IBMS Code</th>
<th>Location Description</th>
<th>FMS Location Code</th>
<th>FMS Location Description</th>
<th>Site</th>
<th>Level</th>
<th>Area</th>
<th>Zone</th>
<th>Unit</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>IB-0078</td>
<td>Hello</td>
<td>542</td>
<td>Description here</td>
<td>Industry</td>
<td>1</td>
<td>Arizona</td>
<td>five</td>
<td>2</td>
<td>USA</td>
</tr>
<tr>
<td>IB-552</td>
<td>World</td>
<td>576</td>
<td>Description here</td>
<td>Textile</td>
<td>2</td>
<td>Texas</td>
<td>one</td>
<td>10</td>
<td>USA</td>
</tr>
</tbody>
</table>
JS code:
var hidecolumns = $("#ibms").DataTable();
function locationhie(hidecolumns){
var u = $("th:contains(FMS Location Description)").index();
hidecolumns.column(u).visible( false );
}
function locationhieSite(hidecolumns){
var a = $("th:contains(Site)").index();
hidecolumns.column(a).visible( false );
}
function locationhielevel(hidecolumns){
var b = $("th:contains(Level)").index();
hidecolumns.column(b).visible( false );
}
function locationhieArea(hidecolumns){
var c = $("th:contains(Area)").index();
hidecolumns.column(c).visible( false );
}
function locationhieZone(hidecolumns){
var d = $("th:contains(Zone)").index();
hidecolumns.column(d).visible( false );
}
function locationhieUnit(hidecolumns){
var e = $("th:contains(Unit)").index();
hidecolumns.column(e).visible( false );
}
function locationhieLocation(hidecolumns){
var f = $("th:contains(Location)").index();
hidecolumns.column(f).visible( false );
}
Can Anyone help me how to achieve this ? Is there any alternative solutions available to do this in a single function?
You can use CSS :nth-child pseudo-class selector to hide some columns, no JS needed:
.locations td:nth-child(n+4),
.locations th:nth-child(n+4) {
display: none;
}
<table id="ibms" class="table table-bordered locations">
<thead>
<tr>
<th>IBMS Code</th>
<th>Location Description</th>
<th>FMS Location Code</th>
<th>FMS Location Description</th>
<th>Site</th>
<th>Level</th>
<th>Area</th>
<th>Zone</th>
<th>Unit</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>IB-0078</td>
<td>Hello</td>
<td>542</td>
<td>Description here</td>
<td>Industry</td>
<td>1</td>
<td>Arizona</td>
<td>five</td>
<td>2</td>
<td>USA</td>
</tr>
<tr>
<td>IB-552</td>
<td>World</td>
<td>576</td>
<td>Description here</td>
<td>Textile</td>
<td>2</td>
<td>Texas</td>
<td>one</td>
<td>10</td>
<td>USA</td>
</tr>
</tbody>
</table>
.locations td:nth-child(n+4) selects any td element within an element of .locations class starting from the index of 4. Indices are calculated from the first occurence of td in its parent, and the first index is 1.
I have a table which displays like this when I load the page.
But I want the subjects to be in a particular order(math,history,science and physics) but the professor names should be sorted in ascending order.
Can this be done using tablesorter's custom sort?
$('table').tablesorter({
theme: 'blue'
});
<link href="https://mottie.github.io/tablesorter/css/theme.blue.css" rel="stylesheet"/>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tablesorter">
<thead>
<tr>
<th>subject</th>
<th>professor</th>
</tr>
</thead>
<tbody>
<tr>
<td>math</td>
<td>Jordan</td>
</tr>
<tr>
<td>math</td>
<td>Kent</td>
</tr>
<tr>
<td>math</td>
<td>Wayne</td>
</tr>
<tr>
<td>history</td>
<td>Richards</td>
</tr>
<tr>
<td>history</td>
<td>Xavier</td>
</tr>
<tr>
<td>science</td>
<td>Arthur</td>
</tr>
<tr>
<td>science</td>
<td>John</td>
</tr>
<tr>
<td>physics</td>
<td>Steve</td>
</tr>
<tr>
<td>physics</td>
<td>Wade</td>
</tr>
</tbody>
</table>
JSFiddle
Any help is appreciated. Thanks in advance.
To set a custom sort order you should add your own parser. Check this example in the docs.
Then, to order by default both columns, just pass sortList to your configuration object.
And to add an additional forced sort that will be appended to the dynamic selections by the user use sortAppend.
Note that in the snippet below I have switched "Steve" and "Wade" so you can see that the sortList is working.
// add parser through the tablesorter addParser method
$.tablesorter.addParser({
// set a unique id
id: 'subjects',
is: function(s, table, cell, $cell) {
// return false so this parser is not auto detected
return false;
},
format: function(s, table, cell, cellIndex) {
// format your data for normalization
return s.toLowerCase()
.replace(/math/,0)
.replace(/history/,1)
.replace(/science/,2)
.replace(/physics/,3);
},
// set type, either numeric or text
type: 'numeric'
});
$('table').tablesorter({
theme: 'blue',
sortList: [[0,0], [1,0]],
sortAppend : [[1,0]]
});
<link href="https://mottie.github.io/tablesorter/css/theme.blue.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<table class="tablesorter">
<thead>
<tr>
<th class="sorter-subjects">subject</th>
<th>professor</th>
</tr>
</thead>
<tbody>
<tr>
<td>math</td>
<td>Jordan</td>
</tr>
<tr>
<td>math</td>
<td>Kent</td>
</tr>
<tr>
<td>math</td>
<td>Wayne</td>
</tr>
<tr>
<td>history</td>
<td>Richards</td>
</tr>
<tr>
<td>history</td>
<td>Xavier</td>
</tr>
<tr>
<td>science</td>
<td>Arthur</td>
</tr>
<tr>
<td>science</td>
<td>John</td>
</tr>
<tr>
<td>physics</td>
<td>Wade</td>
</tr>
<tr>
<td>physics</td>
<td>Steve</td>
</tr>
</tbody>
</table>
When the user clicks on the 'Number' column I want to be able to get the 'Name' column value in the same row. So for example if I clicked on '999' I would want to be able to get David.
$('#table').on('click', 'td:nth-child(2)', function()
{
row = $(this).text();
alert(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border id='table'>
<thead>
<td>Name</td>
<td>Number</td>
<td>Address</td>
</thead>
<tbody>
<tr>
<td>David</td>
<td>999</td>
<td>Street 1</td>
</tr>
<tr>
<td>Bob</td>
<td>555</td>
<td>Street 3</td>
</tr>
<tr>
<td>Jessica</td>
<td>068</td>
<td>Street 5</td>
</tr>
</tbody>
</table>
You can use $(this).closest('tr').find('td:first').text() to get the closest first td and its text.
If the wanted item is inside of the tr but you dont know the place or you want it dynamically, you can add a class or id to the name td and change the code to this $(this).closest('tr').find('#WantedRowId').text()
$('#table').on('click', 'td:nth-child(2)', function() {
alert($(this).closest('tr').find('td:first').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border id='table'>
<thead>
<td>Name</td>
<td>Number</td>
<td>Address</td>
</thead>
<tbody>
<tr>
<td>David</td>
<td>999</td>
<td>Street 1</td>
</tr>
<tr>
<td>Bob</td>
<td>555</td>
<td>Street 3</td>
</tr>
<tr>
<td>Jessica</td>
<td>068</td>
<td>Street 5</td>
</tr>
</tbody>
</table>
You can find below a more appropriate solution that dynamically checks what is the "Name" column index and retrieves accordingly.
As such, if you insert other columns, like ID and what not, it'll still work without updating this specific logic.
$('#table').on('click', 'td:nth-child(2)', function()
{
$td = $(this);
indexCol = $td.closest('table').find('td:contains(Name)').index()
alert( $td.closest('tr').find('td').eq(indexCol).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border id='table'>
<thead>
<td>Name</td>
<td>Number</td>
<td>Address</td>
</thead>
<tbody>
<tr>
<td>David</td>
<td>999</td>
<td>Street 1</td>
</tr>
<tr>
<td>Bob</td>
<td>555</td>
<td>Street 3</td>
</tr>
<tr>
<td>Jessica</td>
<td>068</td>
<td>Street 5</td>
</tr>
</tbody>
</table>
I'm using the jQuery live filter plugin to make an instant search over a entire table. The plugin works fine but it filters by cell and I'd like to search for an entire row (tr) match instead of just a cell.
HTML:
<h2 class="sub-header">List of Enabled Alarms</h2>
<div id="prefetch">
<input class="typeahead" type="text" placeholder="Alarm name search" id="alarm-search">
</div>
<div class="table-responsive">
<table class="table table-striped" id="alarm-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Due Date</th>
<th>Creation Date</th>
<th>Frequency</th>
<th>Enabled</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>60</td>
<td>Alarm dev test</td>
<td>29-12-2015</td>
<td>28-12-2015</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
<tr>
<td>61</td>
<td>Testing email</td>
<td>05-01-2016</td>
<td>04-01-2016</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
</tbody>
</table>
JAVASCRIPT:
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filterChildSelector: 'tr'
});
</script>
The result of this code is partial row information. If I write a it returns all cells that match but not entire rows as I expected. I'd like to search only by column name if possible.
As per this plugin you can pass filter funtion for matching elements. So try below code.
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filter: function(el, val){
return $(el).find('td:eq(1)').text().toUpperCase().indexOf(val.toUpperCase()) >= 0;
}
});
</script>
Or better if you could give any class name to your cell containing alarm name. In that case your html looks like :
<h2 class="sub-header">List of Enabled Alarms</h2>
<div id="prefetch">
<input class="typeahead" type="text" placeholder="Alarm name search" id="alarm-search">
</div>
<div class="table-responsive">
<table class="table table-striped" id="alarm-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Due Date</th>
<th>Creation Date</th>
<th>Frequency</th>
<th>Enabled</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>60</td>
<td class="alarmName">Alarm dev test</td>
<td>29-12-2015</td>
<td>28-12-2015</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
<tr>
<td>61</td>
<td class="alarmName">Testing email</td>
<td>05-01-2016</td>
<td>04-01-2016</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
</tbody>
</table>
and use below script :
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filter: function(el, val){
return $(el).find('.alarmName').text().toUpperCase().indexOf(val.toUpperCase()) >= 0;
}
});
</script>
I have some problems in accessing the text about a grand parent td in table.
When I click on delete, I would like that my function accesses the grand parent text : "fabien" but all I received is undefined.
this is my HTML:
<table class="table table-striped">
<thead>
<tr>
<td>Name</td>
<td>Delete</td>
</tr>
</thead>
<tbody id="tabSelectUser">
<tr>
<td> fabien </td>
<td><a onclick="javascript:aButtonPressed();"> delete</a></td>
</tr> </tbody>
</table>
and this is my function:
<script type="text/javascript">
function aButtonPressed(){
var prevCell = $(this).parent().prev().text();
console.log(prevCell);
</script>
Use Jquery to bind the click event, then your $(this) will work.
<table class="table table-striped">
<thead>
<tr>
<td>Name</td>
<td>Delete</td>
</tr>
</thead>
<tbody id="tabSelectUser">
<tr>
<td> fabien </td>
<td> delete</td>
</tr> </tbody>
</table>
Javascript:
$(function() {
$('.deleteBtn').click(aButtonPressed);
});
function aButtonPressed(){
var prevCell = $(this).parent().prev().text();
console.log(prevCell);
}
$(".childclass").parents("eq(numberofnthparent)").text();