How to hide table data upon load and only show table headers? - javascript

On my table page, I want to display only the header rather than the entire table at first.
Upon loading the page, I want to filter the data and display it based on the selected filter. Although the filter portion works, I am unable to figure out how to display only headers <thead> upon page load or when Select Location is selected from the dropdown.
Please see the sample code here: http://live.datatables.net/milazige/3/edit
$(document).ready(function () {
var table = $('#example').DataTable({
responsive: true,
paging: false,
searching: true,
lengthChange: false,
bInfo: false,
bSort: false,
order: []
});
$('#table-filter').on('change', function () {
table.search(this.value).draw();
});
});
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
</head>
<body>
<p>Select:
<select id="table-filter">
<option>Location</option>
<option>Dallax, TX</option>
<option>Boston, MA</option>
<option>Sandy, UT</option>
<option>Washington, DC</option>
<option>Omaha, NE</option>
</select>
</p>
<table id="example" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;">
<thead>
<tr>
<th>Location</th>
<th>Name</th>
<th>Job</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dallax, TX</td>
<td>test1</td>
<td>5</td>
<td>16</td>
</tr>
<tr>
<td>Boston, MA</td>
<td>test2</td>
<td>test2</td>
<td>test2</td>
</tr>
<tr>
<td>Sandy, UT</td>
<td>test3</td>
<td>test3</td>
<td>test3</td>
</tr>
<tr>
<td>Washington, DC</td>
<td>test4</td>
<td>test4</td>
<td>test4</td>
</tr>
<tr>
<td>Omaha, NE</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
</tbody>
</table>
</body>

Hide the tbody on load using
window.onload = function () {
$('#example tbody').hide();
}
Whenever the user clicks on the filter options, display it. Modify the code inside $(document).ready(function () { ... })
$('#table-filter').on('change', function () {
$('#example tbody').show();
table.search(this.value).draw();
});
Hiding tbody in jQuery way
At the beginning of the script, hide the tbody and show it whenever the user clicks on a filter option
$(document).ready(function () {
// hide tbody on load
$('#example tbody').hide();
var table = $('#example').DataTable({
responsive: true,
paging: false,
searching: true,
lengthChange: false,
bInfo: false,
bSort: false,
order: []
});
$('#table-filter').on('change', function () {
// show the tbody when the user clicks on a filter option
$('#example tbody').show();
table.search(this.value).draw();
});
});

Related

Datatable undefined error obtaining row data

I'm having an error getting the data of a row in Datatables and I can't figure it out why it's happening.
Reading the Docs, getting the row data it's as simple as:
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'tr', function () {
console.log( table.row( this ).data() );
} );
So, I've a Jinja2 template that it's filled in server-side (in Python 3 using flask):
<table id="table" class="dataTable display responsive nowrap" cellspacing="0" width="100%">
<thead>
.....
</thead>
<tbody>
.....
</tbody>
</table>
And I initialize the Datatable with:
function createDatatable() {
$('#table').DataTable({
"select": "single",
"order": [[2, "asc"]],
"language": {.....}
}
});
}
And attach some events:
function attachEvents() {
$('#table tbody').on('click', 'td.tdCredits', function () {
var table = $('#table').DataTable();
var rowId = table.row(this).data()[0];
});
.....
}
Then I do:
$(document).ready(function() {
createDatatable();
attachEvents();
});
So, when I want to get the data of the row that I've clicked (regardless of whether it is selected or not) with this code I get an error on the console:
TypeError: table.row(...).data(...) is undefined
What I'm doing wrong? Because I can see the table rendered, with the pagination buttons and I can order the columns as well.
$(document).ready(function() {
createDatatable();
attachEvents();
});
function createDatatable() {
$('#table').DataTable({
"select": "single",
"order": [[2, "asc"]]
});
}
function attachEvents() {
$('#table tbody').on('click', 'td.tdCredits', function () {
var table = $('#table').DataTable();
var rowData = table.row(this).data();
console.log('Clicked row data: ' + rowData);
var rowId = table.row(this).id();
console.log('Clicked row id: ' + rowId);
// Other code
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="table" class="dataTable display responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th style="display: none;"></th>
<th class="text-center">Header 1</th>
<th class="text-center">Header 2</th>
<th class="text-center">Header 3</th>
<th class="text-center">Header 4</th>
<th class="text-center">Header 5</th>
<th class="text-center">Header 6</th>
<th class="text-center">Header 7</th>
</tr>
</thead>
<tbody>
<tr id="someId" class="filter">
<td style="display: none;"></td>
<td class="text-center">Cell 1</td>
<td class="text-center">Cell 2</td>
<td class="text-center">Cell 3</td>
<td class="text-center">Cell 4</td>
<td class="text-center tdCredits">Click here</td>
<td class="text-center">Cell 6</td>
<td class="text-center">Cell 7</td>
</tr>
</tbody>
</table>
You have a typo. Your variable is initialized as "table" and then you call "tabla". "Tabla" does not exist so it is undefined.
$('#table tbody').on('click', 'td.tdCredits', function () {
var table = $('#table').DataTable();
var rowId = table.row(this).data()[0];
});
Ok, I've found a trick that solved my problem and I don't need to access the '.data()'.
The problem I was having is due as you can edit some fields on each row, so the first time you click in one of the filds of the row, the row it's selected so you can use:
table.row({ selected: true }).index();
But if you click again on other field, the row is deselected and the filter selected:true doesn't work.
Doing the fiddle I discovered that Datatables uses the ID specified in
<tr id="someId" ..>
instead of some internal value. So I pass the ID value to my method and force the row to be selected:
table.row('#' + id).select();
And then I can use:
var rowIndex = table.row({ selected: true }).index();
And update the proper field instead the field of the first visible row:
table.cell({row:rowIndex, column:columnIndex}).data(newValue).draw();
Regards!
You are using array notation data[0] to access your data. But maybe you defined columns.data which means your data is an object.
you can use this.
data["nameofYourColumn"]

semantic ui popup to show div content not properly displaying. also need to show table row data

Can someone give me a solution for this semantic-ui code popup error?
$(document).on('click', 'table td', function() {
$(this)
.popup({
popup: $('.custom.popup')
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" >
<table class="ui table" id="table" >
<thead>
<tr>
<th>Name</th>
<th>Registration Date</th>
<th>E-mail address</th>
<th>Premium Plan</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22#yahoo.com</td>
<td>No</td>
</tr>
<tr>
<td>Jamie Haringtonjhlilk22#yahoo.cojhlilk22#yahoo.cojhlilk22#yahoo.cojhlilk22#yahoo.cojhlilk22#yahoo.co</td>
<td>January 11, 2014September 14,jhlilk22#yahoo.co 2013September 14, 2013September 14, 2013</td>
<td>jamieharingonton#yahoo.comJamie jhlilk22#yahoo.coHaringtonJamie HaringtonJamie Harington</td>
<td>YesJamie HaringtonJamie jhlilk22#yahoo.cojhlilk22#yahoo.coHaringtonJamie HaringtonJamie Harington</td>
</tr>
<tr>
<td>Jill Lewis</td>
<td>May 11, 2014</td>
<td>jilsewris22#yahoo.com</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
<div class="ui custom popup top left transition hidden" id="pop">
popup content
</div>
Semantic ui popup to show div content not properly displaying. Also I need to show table row data.
The best solution i found is given link below. Please go through it.
Semantic ui popup on click table row event to showing the div content.
$(document).on('click', 'table td', function() {
$(this)
.popup({
popup: $('#pop'),
inline:true,
on:'click'
})
.popup('show');
});
visit : [https://codepen.io/manikandanpa/pen/xjmWmg?editors=1010][1]

Tablesorter Child Row always shows for every search filter

The email row is the parent. And the address is the child row.
The childRows are displayed for every search filter keyword.
My aim is to simply filter childRows and show only the matching childRows with Parent Rows as output.
Can someone please help me in figuring out where the problem is.
HTML code:
<div class="form-control divCheckBox">
<div class="tableFilterLink" data-table="selectedTableFilter">
<i class="icon-filter"></i>
<a>Show Filters</a>
</div>
<table id="selectedTableFilter" class="table table-bordered table-striped">
<thead>
<tr>
<th>Selected Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>dffbach#yahoo.com</td>
</tr>
<tr>
<td>kjjdoe#hotmail.com</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="4">
<div class="bold">Shipping Address</div>
<div>2255 254th Avenue Se<br>Albany, Oregon 97321</div>
</td>
</tr>
<tr>
<td>pootconway#earthlink.net</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="4">
<div class="bold">Shipping Address</div>
<div>99700 Bell Road<br>Auburn, California 95603</div>
</td>
</tr>
</tbody>
</table>
</div>
Javascript:
$("#selectedTableFilter").tablesorter({
debug: true,
headerTemplate: "{content}<b></b>",
cssChildRow : "tablesorter-childRow",
widgets: ["zebra","filter"],
sortInitialOrder: "asc",
sortList: [[0,0]],
sortRestart: true,
widgetOptions: {
filter_hideFilters: true,
zebra : ['normal-row', 'alt-row' ],
filter_childRows: true,
filter_cssFilter : 'tablesorter-filter',
filter_startsWith: false,
filter_ignoreCase : true,
filter_childWithSibs: false,
},
widthFixed: true
});
Thanks #Mottie
Github Issue link
If you are using a custom theme for tablesorter, please make sure that the following definition is included:
.tablesorter-filter {
display: none;
}
JSFIDDLE

Datatables: how to get sort arrows on top

I’m using DataTables to display data in my UI.
I’ve configured it to show a search box for every column.
But now the sort arrows are not on the top any more.
How it is currently looking:
Image (I do not have enough reputation to post an image sry.)
How can I get them back to the top?
HTML:
<div id="container">
<div id="demo">
<h2>Index</h2>
<table id="example" class="display">
<thead>
<tr>
<th>MovieId</th>
<th>Title</th>
<th>TagLine</th>
<th>AirDate</th>
</tr>
<tr>
<td></td>
<td>Title</td>
<td>TagLine</td>
<td>AirDate</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
JS-Code:
$(document).ready(function () {
$('#example thead td').each(function () {
var title = $('#example thead td').eq($(this).index()).text();
if (title == "") {
return;
}
$(this).html('<input type="text" placeholder="SearchText ' + title + '" />');
});
var table = $('#example').DataTable({
"sAjaxSource": "http://localhost:51794/Movie/AjaxHandler",
"bProcessing": true,
"bServerSide": true,
"sDom": 'ltipr',
"aoColumns": [
{
"sName": "MovieId",
"bSortable": false,
"bSearchable": false,
"bVisible": false
},
{ "sName": "Title" },
{ "sName": "TagLine" },
{ "sName": "AirDate" }
]
});
$("#example thead input").on('keyup change', function () {
table
.column($(this).parent().index() + ':visible')
.search(this.value)
.draw();
});
});
I suggest you to place the filters above header row, and your problem will be solved.
:
<thead>
<tr>
<td></td>
<td>Position</td>
<td>Office</td>
<td>Age</td>
<td>Start date</td>
<td>Salary</td>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
Add the option
"bSortCellsTop": true
to your datatables init code.
http://legacy.datatables.net/usage/options#bSortCellsTop

Dynamic Table JQuery Editting

I am totally newbie for JQuery but I need someone help for this part.
I m dealing with a dynamic table from a template. I wish to remove the 10 records per page section but I have no idea how to do so. Anyone please?
Here is the HTML code which I still understandable
<table class="table table-striped border-top" id="sample_1">
<thead>
<tr>
<!-- <th style="width:8px;"><input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes" /></th> -->
<th>No</th>
<th>Name</th>
<th class="hidden-phone">Name</th>
<th class="hidden-phone">Text</th>
<th class="hidden-phone">Text</th>
<th class="hidden-phone">Text</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<!-- <td><input type="checkbox" class="checkboxes" value="1" /></td> -->
<td>1</td>
<td>Jhone doe</td>
<td class="hidden-phone">jhone-doe#gmail.com</td>
<td class="hidden-phone">10</td>
<td class="center hidden-phone">02.03.2013</td>
<td class="hidden-phone"><span class="label label-success">Approved</span></td>
</tr>
<tr class="odd gradeX">
<!-- <td><input type="checkbox" class="checkboxes" value="1" /></td> -->
<td>2</td>
<td>dipsdf</td>
<td class="hidden-phone">lorem-ip#gmail.com</td>
<td class="hidden-phone">33</td>
<td class="center hidden-phone">05.04.2013</td>
<td class="hidden-phone"><span class="label label-success">Approved</span></td>
</tr>
</tbody>
</table>
Jquery part which I have no idea what it doing there
var Script = function () {
// begin first table
$('#sample_1').dataTable({
"sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}]
});
jQuery('#sample_1 .group-checkable').change(function () {
var set = jQuery(this).attr("data-set");
var checked = jQuery(this).is(":checked");
jQuery(set).each(function () {
if (checked) {
$(this).attr("checked", true);
} else {
$(this).attr("checked", false);
}
});
jQuery.uniform.update(set);
});
jQuery('#sample_1_wrapper .dataTables_filter input').addClass("form-control"); // modify table search input
jQuery('#sample_1_wrapper .dataTables_length select').addClass("form-control"); // modify table per page dropdown}();
I am trying to link the table with display data from database while replacing the 10 records per page section with an add button there. Anyone please.
Appreciate.
If you're just trying to list all the records at once (plus hide the option to change number show per page) you have to disable pagination.
Add the following option to your datatables call.
"bPaginate": false
Read more about Datatable options here.
EDIT
If you still want to paginate but just hide the "per page" option, use the following option instead.
"bLengthChange": false
JSFiddle

Categories

Resources