I'm trying to auto select first row of table when data is loaded for the first time and failing to do that.
How do I auto select first row of table when table loads for the first time?
This html doesn't work:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css" title="currentStyle">
#import "DataTables/css/demo_page.css";
#import "DataTables/css/demo_table.css";
</style>
<script type="text/javascript" src="Datatables/js/jquery.js"></script>
<script type="text/javascript" src="Datatables/js/jquery.dataTables.js"></script>
<script>
var oTable;
var firstTime = true;
$(document).ready(function () {
$("#example tbody").click(function (event) {
$(oTable.fnSettings().aoData).each(function () {
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
oTable = $('#example').dataTable({
"sScrollX": "500px",
"sPaginationType": "full_numbers",
"bServerSide": true,
"sAjaxSource": "services/data3.ashx",
"sServerMethod": "POST",
"fnDrawCallback": function (oSettings) {
if (firstTime) {
alert('DataTables has redrawn the table');
oTable.$('tr:first').click();
firstTime = false;
}
}
});
});
</script>
</head>
<body>
<table border="1" >
<tr><td>id</td><td><input type="text" /></td></tr>
<tr><td>name</td><td><input type="text" /></td></tr>
<tr><td>surname</td><td><input type="text" /></td></tr>
</table><br />
<table id="example" border="1" class="display">
<thead>
<tr>
<td>name</td>
<td>surname</td>
<td>id</td>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
oTable.$('tr:first') will raise an error - $ is not a function or property of oTable.
You must use
oTable.find('tbody tr:first').focus()
because tr:first will return the <thead> <tr>, not the <tbody> <tr>!
I dont think you by default can focus an entire <tr> in HTML, so you must add some CSS to the <tr> to make the focus visible. Like this
tr {
border:1px inset white;
}
tr.focused {
border:1px solid red;
}
oTable.find('tbody tr:first').addClass('focused');
An example of focusing rows when they are clicked :
oTable.find('tbody tr').click(function() {
oTable.find('tbody tr').removeClass('focused');
$(this).addClass('focused');
});
All the above in this fiddle -> http://jsfiddle.net/vv7Sa/
Check this link, it should help: https://www.datatables.net/forums/discussion/18305/select-first-row-onload. or you can try this:
$('#table-id').on('init.dt', function() {
$('#table-id tbody tr:eq(0)').click();
});
Related
I saw this block of code from w3schools and it works perfectly fine. My only issue is that, if the inputted text is not present on the table, it doesn't display anything.
Here's the script code:
$(document).ready(function() {
$('#searchBar').on('keyup', function() {
var value = $(this).val().toLowerCase();
$('#tableData tr').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Here's the link to the w3schools article that I am talking about:
https://www.w3schools.com/bootstrap/bootstrap_filters.asp
I'd like to display a text saying "No results found" if there are no search results.
Here my solution for your problem I think this is the optimal solution for your problem.
Here the HTML which I get from the link you provided of w3school I added here a new row in HTML , little style and some conditional line in the JS code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.no-data {
display: none;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
<tr class="no-data">
<td colspan="4">No data</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
let check = true;
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
if($(this).text().toLowerCase().indexOf(value) > -1){
check = false;
$('.no-data').hide();
}
});
if(check){
$('.no-data').show();
}
});
});
</script>
</body>
</html>
the new row I added in HTML for showing "No data" is here:
<tr class="no-data">
<td colspan="4">No data</td>
</tr>
style for the new row
.no-data {
display: none;
text-align: center;
}
I added a some new conditional line in JS and after adding those the JS code is :
$(document).ready(function(){
$("#myInput").on("keyup", function() {
let check = true;
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
if($(this).text().toLowerCase().indexOf(value) > -1){
check = false;
$('.no-data').hide();
}
});
if(check){
$('.no-data').show();
}
});
});
Hope your problem is solved have a nice day .
I created a table using datatables and on footer I added anempty dropdown select using Bootstrap-select as below :
<tfoot>
<tr>
<th><select class="selectpicker" multiple></select></th>
</tr>
</tfoot>
When my datatable is created, I want to add the distinct values of that column as options in my select.
The issue is : the datatable is drawn without errors but the select is not populated. It still shows empty but when i use inspect on browser I see the options are already inside the select.
I used emptybefore append and tried html instead of append but still not showing the options. I also tried footerCallback instead of initComplete.
When I add the options manually inside my select in the html, it works fine. it looks like in datatable the footer is loaded before the body that's why it's not showing the options when it's displayed before the body is ready.
Any suggestions please how I could fixe it ? Thank you very much.
$(document).ready(function() {
$('.selectpicker').selectpicker();
$('#example').DataTable({
"lengthChange": false,
"info": false,
"paging": false,
"searching": false,
initComplete: function () {
this.api().columns().every( function () {
var column = this;
column.data().unique().sort().each( function ( d, j ) {
$('.selectpicker').append( '<option value="'+d+'">'+d+'</option>' ) } );
} ); } }); });
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>
<table id="example" class="table table-bordered" style="width:100%">
<thead>
<tr>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr><td>Austria</td></tr>
<tr><td>Japan</td></tr>
<tr><td>Sweden</td></tr>
<tr><td>Finland</td></tr>
<tr><td>India</td></tr>
<tr><td>USA</td></tr>
<tr><td>Sweden</td></tr>
<tr><td>France</td></tr>
<tr><td>Austria</td></tr>
</tbody>
<tfoot>
<tr>
<th><select class="selectpicker" multiple></select></th>
</tr>
</tfoot>
</table>
Your mistake was initiating your selectpicker before populating it with options, whereas the opposite is recommended in their reference docs.
Following is a fixed live-demo:
$('#example').DataTable({
lengthChange: false,
info: false,
paging: false,
searching: false,
initComplete: function(){
const table = this.api();
table.columns().every(function(){
const title = $(this.header()).text();
const options = this.data().unique().sort().toArray().reduce((options, item) => options += `<option value="${item}">${item}</option>`, '');
$('.selectpicker').append(options).selectpicker()
});
}
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" /><link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css"><script src="https://code.jquery.com/jquery-3.5.1.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script><script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script><script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script><table id="example" class="table table-bordered" style="width:100%"><thead><tr><th>Country</th></tr></thead><tbody><tr><td>Austria</td></tr><tr><td>Japan</td></tr><tr><td>Sweden</td></tr><tr><td>Finland</td></tr><tr><td>India</td></tr><tr><td>USA</td></tr><tr><td>Sweden</td></tr><tr><td>France</td></tr><tr><td>Austria</td></tr></tbody><tfoot><tr><th><select class="selectpicker" multiple></select></th></tr></tfoot></table>
You will need to initialize the selectpicker after you append the data not before.
$(document).ready(function() {
$('#example').DataTable({
"lengthChange": false,
"info": false,
"paging": false,
"searching": false,
initComplete: function () {
this.api().columns().every( function () {
var column = this;
column.data().unique().sort().each( function ( d, j ) {
$('.selectpicker').append( '<option value="'+d+'">'+d+'</option>' ) } );
} ); } });
// initialize the selectpicker after appending options
$('.selectpicker').selectpicker();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>
<table id="example" class="table table-bordered" style="width:100%">
<thead>
<tr>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr><td>Austria</td></tr>
<tr><td>Japan</td></tr>
<tr><td>Sweden</td></tr>
<tr><td>Finland</td></tr>
<tr><td>India</td></tr>
<tr><td>USA</td></tr>
<tr><td>Sweden</td></tr>
<tr><td>France</td></tr>
<tr><td>Austria</td></tr>
</tbody>
<tfoot>
<tr>
<th><select class="selectpicker" multiple></select></th>
</tr>
</tfoot>
</table>
Hiding a column on unchecking a checkbox
NOTE: Before you point to links based on the same question, I need to tell I tried all the relevant solutions here and nothing worked. I signed up precisely coz none of the solutions here actually worked.
So, my code lets you create a table dynamically and edit the table contents as well. For every new column created,a checkbox is also added which when unselected hides the created column.
This is my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript'>
function addrow()
{
first_row = $('#Row1');
first_row.clone().appendTo('random');
}
function addcol()
{
var myform = $('#myform'),
iter = 1;
myform.find('tr').each(function(){
var trow = $(this);
if(trow.index() === 0){
trow.append('<th contenteditable="true" class="COLUMN_'+iter+'"><b>COLUMN # '+iter+'</b></td>');
var labelname = "Show COLUMN #" +iter;
var create = $('<input type="checkbox" name="COLUMN_'+iter+'" checked="checked"><label>'+labelname+'</label><br>');
$(".noprint").append(create);
}else{
trow.append('<td class="COLUMN_'+iter+'" contenteditable="true"></td>');
}
});
iter += 1;
}
$(window).load(function(){
$("input:checkbox").click(function(){
var column = "."+$(this).attr("name");
$(column).toggle();
});
});
</script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<input type="button" value="Add new row" onclick="addrow()"/> <input type="button" value="Add new column" onclick="addcol()"/>
<br>
<br>
<span class="noprint"> </span>
<form id="myform">
<table id="random" width="70%">
<tr>
<th>Name 1</th>
<th>Name 2</th>
</tr>
<tr id="Row1">
<td contenteditable="true">Entry 1</td>
<td contenteditable="true">Entry 2</td>
</tr>
<tr>
<td contenteditable="true">Entry 3</td>
<td contenteditable="true">Entry 4</td>
</tr>
</table>
</form>
</body>
</html>
I'm unable to hide the columns based on the checkbox status. Can someone tell me what I'm doing wrong?
Try this...
$(“#myform”).on(“click”,”input[type=‘checkbox’]”,function(){
var column = "."+$(this).attr("name");
$(column).toggle();
});
Since your checkbox elements are added later, you need to listen for the click event on the parent element and then bind to the child.
I have a table as follows:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
// I'd like a suggestion here
});
});
</head>
<body>
<table>
<tr><th>Name</th><th>Email</th></tr>
<tr><td>abc</td><td>abc#gmail.com</td></tr>
<tr><td>xyz</td><tr><td>xyz#gmail.com</td>
</table>
<button>click here</button>
</body>
</html>
I want after clicking that button it should create a json object conataining all data in table send it to the another url using jquery.
You can select table rows with data and then use $.fn.map method to extract necessary values and put them in array:
$('button').click(function() {
var data = $('table tr:gt(0)').map(function() {
return {
name: $(this.cells[0]).text(),
email: $(this.cells[1]).text()
};
}).get();
alert(JSON.stringify(data, null, 4))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>abc</td>
<td>abc#gmail.com</td>
</tr>
<tr>
<td>xyz</td>
<td>xyz#gmail.com</td>
</tr>
</table>
<button>click here</button>
I try to put 2 tables in a same page using jquery plugin tablesorter ..
But if do it, my second table does not work correctly..
In my second table, i have not the header name of my second table,
You can see it here :http://jsfiddle.net/9hHx5/
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.scroller.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('table.tablesorter').tablesorter({
scrollHeight: 150,
widgets: ['zebra','scroller']
});
//Setup window.resizeEnd event
$(window).bind('resize', window_resize);
$(window).bind('resizeEnd', function (e) {
/*
IE calls resize when you modify content, so we have to unbind the resize event
so we don't end up with an infinite loop. we can rebind after we're done.
*/
$(window).unbind('resize', window_resize);
$('table.tablesorter').each(function(n, t) {
if (typeof t.resizeWidth === 'function') t.resizeWidth();
});
$(window).bind('resize', window_resize);
});
});
function window_resize() {
if (this.resize_timer) clearTimeout(this.resize_timer);
this.resize_timer = setTimeout(function () {
$(this).trigger('resizeEnd');
}
, 250
);
}
</script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="inner-header">Demo</div>
<table id="table1" cellspacing="0" cellpadding="0" class="tablesorter">
<thead>
<tr>
<th class="yr">Year</th>
<th>Artist</th>
<th>Single</th>
<th>Album</th></tr>
</thead>
<tbody>
<tr><td class="yr">1979</td><td>Specials</td><td>Gangsters</td><td>Non-album single</td></tr>
<tr><td class="yr">1979</td><td>Specials</td><td>A Message to You, Rudy</td><td>Specials </td></tr>
<tr><td class="yr">1980</td><td>Specials</td><td>Too Much Too Young</td><td>Specials</td></tr>
<tr><td class="yr">1980</td><td>Specials</td><td>Rat Race</td><td>Non-album single</td></tr>
<tr><td class="yr">1980</td><td>Specials</td><td>Stereotype</td><td>More Specials</td></tr>
<tr><td class="yr">1980</td><td>Specials</td><td>Do Nothing</td><td>More Specials</td></tr>
</tbody>
</table>
<table id="table2" cellspacing="0" cellpadding="0" class="tablesorter">
<thead>
<tr>
<th>People</th><th>Age</th><th>Birthday</th>
</thead>
<tbody>
<tr>
<td class="yr">XYZ</td><td>12</td><td>12/15/2012</td></tr>
<tr>
<td class="yr">RZE</td><td>36</td><td>12/12/1985</td></tr>
<tr>
<td class="yr">HFF</td> <td>36</td><td>01/02/1985</td>
</tr>
</tbody>
</table>
</body>
</html>
Please if someone can help me
The problem appears to be a bug in the scroller widget code:
Change this line:
var $hdr = $('<table class="' + $tbl.attr('class') + '" cellpadding=0 cellspacing=0><thead>' + $('thead', table[0]).html() + '<thead></table>');
to this (it's just this part $('thead', $tbl).html() that changed)
var $hdr = $('<table class="' + $tbl.attr('class') + '" cellpadding=0 cellspacing=0><thead>' + $('thead', $tbl).html() + '<thead></table>');
and it fixes the problem.
I've included that correction in this updated demo.
I would also like to suggest you try out my fork of tablesorter which includes lots of improvements, as well as this updated scroller widget (which still has some problems that needs fixing).