I am trying to hide/display certain rows based on data from a hidden column. my table structure looks like:
<table id="agent_search" cellpadding="0" cellspacing="0" border="0" class="table table-striped">
<thead>
<th>Agent ID</th>
<th>Agent Name</th>
<th>ID Number</th>
<th>Mobile Number</th>
<th>Team Name</th>
<th>Status</th>
<th></th>
</thead>
</table>
I am trying to hide/show records based on the Status column, using a checkbox. If the status == DEREGISTERED I want to exclude it from the table (unchecked checkbox).
I adapted my code from what was done here:
$.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {
// does not run this
console.log("GOTHRERE");
if ('agent_search' == oSettings.nTable.id) {
// console.dir(oSettings);
console.dir(aData);
var dereg = aData[5];
console.log(dereg);
if (dereg == "DEACTIVATED"){
return $('#toggle_deregistred').is(':checked');
} else {
return $('#toggle_deregistred').is(':not:checked');
}
}
return true;
});
I have tried using $.fn.dataTableExt.afnFiltering witch is used for custom filtering, only to find that I can not do it. It was once possible in previous versions of dataTables as in this case , but as it turns out it was a bug that allowed it to be possible :|.
Is there a way that I can filter out rows based on if their Status with the use of a checkbox? or is there something in the api I can use that I have over looked?
UPDATE:
I have made a jsfiddle in which it is working, how ever in the process of adapting my code to put it in jsfiddle, I noticed that it is bServerSide that is causing the $.fn.dataTableExt.afnFiltering not to work. Is there a work around or another way to user Server-side processing?
I found an alternate way to the checkbox of hiding/displaying.
I use Bootstrap 3 tabs to apply different filters:
<ul class="nav nav-tabs form-tabs" id="search-tabs">
<li id="basic-list" class="active"><a data-toggle="tab" data-dtname="all" href="#all">All</a></li>
<li class="" id="dereg-list"> <a data-toggle="tab" data-dtname="dereg" href="#dereg">Deregistered</a></li>
</ul>
<br>
<div class="tab-content">
<fieldset id="all" class="tab-pane active">
<table id="agent_search" cellpadding="0" cellspacing="0" border="0" class="table table-striped">
<thead>
<th>Agent ID</th>
<th>Agent Name</th>
<th>ID Number</th>
<th>Mobile Number</th>
<th>Team Name</th>
<th>Status</th>
<th></th>
</thead>
</table>
</fieldset>
<fieldset id="dereg" class="tab-pane ">
<table id="dereg_agent_search" cellpadding="0" cellspacing="0" border="0" class="table table-striped">
<thead>
<th>Agent ID</th>
<th>Agent Name</th>
<th>ID Number</th>
<th>Mobile Number</th>
<th>Team Name</th>
<th>Status</th>
<th></th>
</thead>
</table>
</fieldset>
</div>
I first initialize the table on the first tab all which uses bServerSide=true and for the other table(when I switch to the other tab) I do:
$('#search-tabs a').click(function(e) {
e.preventDefault();
$(this).tab('show');
if (this.dataset["dtname"] == "all") {
oTable.fnDraw();
} else if (this.dataset["dtname"] == "dereg") {
var data = $("form").serialize();
$.post(
url, data
).success(function(data){
console.log(data.aaData);
kTable = $('#dereg_agent_search').dataTable( {
"sScrollY": "250px",
"data": data.aaData,
"destroy" : true,
"sDom": "<'row'<'col-sm-6'><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'>>S",
"aoColumnDefs": [
{
"bSortable": false,
"aTargets": [ 6 ],
"sWidth":"150px",
"mRender": function( data, type, full ){
return "<div class='btn-group'><a href="+full[6][0]+" class='btn btn-default btn-sm'>View</a><a href="+full[6][1]+" class='btn btn-default btn-sm'>Edit</a></div>"
}
},
{
"bSortable": true,
"aTargets": [ 0 ],
"sWidth":"150px",
"mRender": function( data, type, full ){
if (full[5] == "DEACTIVATED"){
return "<a href="+full[6][0]+" class='DEACTIVATED'>"+data+"</a>"
} else{
return ""+data+""
}
}
},
{"aTargets": [ 4 ], "sWidth":"250px" },
{"aTargets": [ 5 ], "bVisible":false},
],
"bDeferRender": true,
"bStateSave": true
} );
});
kTable.fnDraw();
}
});
Notice that I get the data to populate the table from the server - using a jQuery $.post request, and then I use datatables' data attribute to populate the table.
I hope This can Help someone.
Related
i have a table that i filter using a checkbox based on a column field bool "isAdmin" - when checkbox is checked, i see all orders, when unchecked,
i only see orders with isAdmin = true.
this is working as expected,
but i want isAdmin (first column) to be hidden, but i can't remove it since
i want to use it for the filtering.
View Html:
<table id="tblData" class="table table-striped table-bordered" style="width:100%">
<div id="AllOrders">
<input type="checkbox" id="pos" value=true /> Show All Orders
</div>
<thead class="thead-dark">
<tr class="table-info">
<th>Is Admin</th>
<th>Order Id</th>
<th>Order Status</th>
<th>Product</th>
<th>US Date</th>
<th>Store</th>
<th>Quantity</th>
<th>Full Address</th>
<th>Tracking Number</th>
<th></th>
</thead>
#{string FullAddress = "";}
#foreach (Order order in Model.Order)
{
FullAddress = "";
<tr>
<td>#order.IsAdmin</td>
<td>#order.Id</td>
<td>#order.OrderStatus</td>
.
.
.
.
</table>
Javascript that control the checkbox in the section script:
<script>
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var isAdmin = data[0];
if ($('#pos').prop("checked") == true) {
return true;
} else if ($('#pos').prop("checked") == false && isAdmin) {
return true;
}
else { return false; }
}
);
$('input:checkbox').on('change', function () {
var table = $('#tblData').DataTable();
table.draw();
});
</script>
I'm using the DataTables and DatePicker plugins with Aurelia.
I basically want the user to select a date and have the data table render the data for that date but with my current code there seems to be an issue with the datatable once the data changes. As soon as the data changes the formatting on the datatable plugin seems off and the sorting, scrolling buttons don't work.
I tried adding the datepicker on a jsfiddle but I had no luck as you have to add some configuration to package.json and I can't seem to figure that out. If anyone could give any hints I would really appreciate it. Let me know if you have any questions
pickerChanged() {
this.picker.events.onChange = (e) => {
this.data = [];
let inputDate = new Date(e.date.format('YYYY-MM-DD') + ' 00:00');
let data = (demoData as any).default;
for (let row of data) {
let rowDate = new Date((row as any).date);
if (inputDate.getTime() >= rowDate.getTime()) {
this.data.push(row);
}
}
console.log(4444, this.data);
$(document).ready(function() {
$('#dataTable').DataTable( {
"scrollY": "280px",
"scrollCollapse": true,
"paging":false,
"searching": false,
"info": false,
"language": {
"emptyTable": " "
}
} );
} );
};
}
<abp-datetime-picker element.bind="picker"></abp-datetime-picker>
<div class="row pt-2">
<div class="col-12">
<table class="table" id="dataTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Receipt #</th>
<th>Invoice number</th>
<th>Date</th>
<th>Total</th>
<th>Balance</th>
<th>Payment</th>
</tr>
</thead>
<tbody>
<tr repeat.for="row of data">
<td>${row.id}</td>
<td>${row.name}</td>
<td>${row.receiptNumber}</td>
<td>${row.invoiceNumber}</td>
<td>${row.date}</td>
<td>${row.total}</td>
<td>${row.balance}</td>
<td>${row.payment}</td>
</tr>
</tbody>
</table>
<div class="text-center" if.bind="!data.length">No records available. Please select a valid date</div>
</div>
</div>
After a few hours of investigating the issue I finally figured it out. The problem with my old code was that I was passing data to the datatable using ${row.id} for example instead of using the data parameter with datatable like follows.
$('#dataTable').DataTable({
data: this.data,
columns: [
{ data: 'id' },
{ data: 'name' },
{ data: 'receiptNumber' },
{ data: 'invoiceNumber' },
{ data: 'date' },
{ data: 'total' },
{ data: 'balance' },
{ data: 'payment' },
]
});
<div class="row pt-2">
<div class="col-12">
<table class="table" id="dataTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Receipt #</th>
<th>Invoice number</th>
<th>Date</th>
<th>Total</th>
<th>Balance</th>
<th>Payment</th>
</tr>
</thead>
</table>
</div>
</div>
and then calling this function whenever you want to update your data
$('#dataTable').DataTable().clear().rows.add(this.data).draw();
I am retrieving data from SQL to have in the table. My code is returning an error "DataTables warning: table id=example - Cannot reinitialise DataTable.For more information about this error, please see http://datatables.net/tn/3"
That's my code below. Both html and script. Help would be appreciated.
<table id="example" cellpadding="0" cellspacing="0" border="0" width="100%" class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">column 1</th>
<th scope="col">column 2</th>
<th scope="col">column 3</th>
<th scope="col">column 4</th>
<th scope="col">column 5</th>
<th scope="col">column 6</th>
<th scope="col">column 7</th>
<th scope="col">column 8</th>
</tr>
<!-- <th scope="col">Booking Ref</th>
<th scope="col">Listing</th> -->
</thead>
</table>
<script>
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax":{
url :"employee-grid-data.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
$(".employee-grid-error").html("");
$("#example").append('<tbody class="employee-grid-error"><tr><th colspan="16">No data found in the server</th></tr></tbody>');
$("#example_processing").css("display","none");
}
}
"columnDefs": [
{ "visible": false, searchable: true, "targets": [5,6] }
],
"order": [[ 2, 'asc' ]],
"displayLength": 25,
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(6, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="7" style="padding:15px;">'+group+'</td></tr>'
);
last = group;
}
} );
}
} ); } );
Ok, I was missing a comma before "columnDefs":
So I've been messing around with Datatables.js but I can't seem to populate it with results. So I have a Java servlet that returns the following JSON:
[{"fileName":"report (1).xlsx","fileSize":"82 KB","fileDate":"07/13/2016 15:19:43"},{"fileName":"report (2).xlsx","fileSize":"11 KB","fileDate":"07/07/2016 11:35:47"},{"fileName":"report (3).xlsx","fileSize":"11 KB","fileDate":"07/07/2016 11:35:47"},{"fileName":"report (4).xlsx","fileSize":"9 KB","fileDate":"07/13/2016 15:20:54"}]
My HTML looks likes:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Size</th>
<th>Date</th>
</tr>
</thead>
</table>
My JS looks like:
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"processing": true,
"ajax": {
"url": "/TR3Application/FileViewerServlet",
"dataSrc": "",
"type": "GET"
}
} );
});
When I just call AJAX and log what it returns, I'm getting the exact same JSON response from the servlet. But the Datatables don't seem to populate anything. What am I doing wrong?
You need to let dataTables knows the columns - Json mapping.
<tr>
<th data-data="fileName">Name</th>
<th data-data="fileSize">Size</th>
<th data-data="fileDate">Date</th>
</tr>
I have the following html code for table:
<table id="employeeDetails" class="table table-bordered table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Country</th>
<th>Team</th>
</tr>
</thead>
</table>
And the following code for dataTable initialization:
$('#employeeDetailsTable').dataTable({
"processing":true,
"ajax" : {
"url" : '/fetchSearchResults',
"type" : 'POST'
}
}
});
I read in many places on the internet that sorting feature and search box in datatable is not provided if colspan is used. Even after not using colspan I'm not getting these features in my datatable. What can be the possible reason for this?