We Keep Coding

How to use a DataTable with an array of objects?

I'm trying to use the property "data" to show my data in the table, but the table doesn't works. I made a test using a local array of strings and works very well, I don't know why with an object the table doesn't works
ngAfterViewInit() {
this.listarNotificacao()
$('#datatables').DataTable({
"pagingType": "full_numbers",
"lengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
lengthChange: false,
responsive: true,
searching: true,
data: this.notificacoes,
columns: [{
data: 'guidNotificacao'
},
{
data: 'titulo'
},
{
data: 'descricao'
},
{
data: 'escopo'
},
],
language: {
search: "_INPUT_",
searchPlaceholder: "Pesquisar promoções",
},
}
});
const table = $('#datatables').DataTable();
$('#inputSearch').on('keyup', function() {
table.search(this.value).draw();
});
}
<div class="material-datatables">
<table id="datatables" class="table table-no-bordered " cellspacing="0" width="100%" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Título</th>
<th>Descrição</th>
<th>Escopo</th>
</tr>
</thead>
</table>
</div>

You have a typo in your datatable initialization. There's an extra curly brace after language. If you look at your browser's dev console, it would have told you this.

Datatable showing wrong page numbers

Following is the HTML code:
<table id="myTable" class="dTable1 contentList table table-bordered" style="z-index: 2; ">
<thead id="tableHeader">
<tr id="headerRow">
<th>Time</th>
<th>Event</th>
<th>Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
I am initializing the table on popup open using below JavaScript code:
showHistory = function (contentID) {
debugger;
var auditRes;
//var oTable = $('#AuditListtable').dataTable();
//oTable.fnDestroy();
//alert("outside");
$('#AuditListtable').dataTable({
"sAjaxSource":SERVERURL?contentId=' + contentID,
"aoColumns": [
{ "mData": "AccessDate" },
{
"mData": "EventDescription",
"bSortable": false
},
{
"mData": "IPAddress",
"bSortable": false,
"mRender": function (data, type, row) {
debugger;
return '<td> <span title="' + data + '">Played By: ' + row.FirstName + ', IP Address: ' + data + '</span></td>';
}
}
],
"paging": true,
"sDom": '<"top"p<"clear">>rt',
"sPaginationType": "full_numbers",
"searching": false,
"bFilter": false,
"processing": true,
"bServerSide": true,
"order":true,
"sServerMethod": "POST",
"bAutoWidth": false,
"iDisplayLength": 8
});
$('#historyPopup').modal('show');
}
The data will be populated in pop up. Currently we are having total 9 records but pagination is showing as 5 pages. After clicking on another page, it displays previous record. Table is not refreshed.

You've enabled server-side processing with "bServerSide": true. Most likely your response is incorrect.
If you indeed want server-side processing, your response should be something like:
{
"sEcho": 1,
"iTotalRecords": 9,
"iTotalDisplayRecords": 9,
"aaData": [
// ... skipped ...
]
}
where sEcho should have the value of sEcho parameter from the request, iTotalRecords is number of all records before the filtering, and iTotalDisplayRecords is number of all records after the filtering.
See server-side processing for more information.

DataTable : Hide data as default

I want to hide my data as default, and show the results if something in my Search Box.
Here is my current setting :
<script type="text/javascript">
$( document ).ready(function() {
$('#inventory').dataTable({
"lengthMenu": [ [5], [10, 25, 50, "All"] ],
"bLengthChange": false,
"search": {
"caseInsensitive": true
}
});
var dataTable = $('#inventory').dataTable();
$("#searchbox").keyup(function() {
dataTable.fnFilter(this.value);
});
});
</script>

Can you search some non-existent value (is there is any) just after creation of datatable like this.
$('#inventory').dataTable({
"lengthMenu": [ [5], [10, 25, 50, "All"] ],
"bLengthChange": false,
"search": {
"caseInsensitive": true
}
});
var dataTable = $('#inventory').dataTable();
dataTable.fnFilter('some non existant value');
$("#searchbox").keyup(function() {
dataTable.fnFilter(this.value);
});

First, wrap a <div> around my table and give it an id = main
<div id="main">
<table class="display" id="inventory">
<thead class="thin-border-bottom ">
<th>SKU</th>
<th>Description</th>
<th>Stock</th>
</thead>
<tbody>
#foreach ( Inventory::all() as $inventory)
<tr>
<td>{{ $inventory->sku }} </td>
<td>{{ $inventory->description }} </td>
<td>{{ $inventory->stock }} </td>
</tr>
#endforeach
</tbody>
</table>
</div>
Second, fix my script to hide that div, and only show it when there is something in the search box.
$('#main').hide();
// Setting to Inventory Table
$('#inventory').dataTable({
"lengthMenu": [ 10 ] ,
"bLengthChange": false,
});
// Bind the value from a new search to the dataTable
var dataTable = $('#inventory').dataTable();
$("#searchbox").keyup(function() {
dataTable.fnFilter(this.value);
$('#main').show(); // show the main div
});

DataTables: Add option on which script to run

I am showing a DataTables using the below code. It is using server side processing and works ok.
I would like to add a drop down option above the table with for example:
Product Group 1
Product Group 2
and then based on the selected option this determines what server side processing script is run.
Existing code
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var table = $('#table').dataTable( {
"ajax": {
"url": "../server_processing/prices.php",
"type": "POST"
},
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"order": [[ 1, "asc" ]],
"serverSide": true
} );
var tabletools = new $.fn.dataTable.TableTools( table, {
"dom": 'T<"clear">lfrtip',
"sSwfPath": "../copy_csv_xls_pdf.swf"
} );
$( tabletools.fnContainer() ).insertBefore('div.dataTables_wrapper');
} );
</script>
For example here the "url": "../server_processing/prices.php",would be "url": "../server_processing/prices.php?ProductGroup=X",.
I'm sure something like this is simple in JavaScript/jQuery but I'm not sure how to start. I am new to both, my only experience thus far has been DataTables.
Also how would I handle the HTML table itself as the column headers could change based on the selected product group.
Existing code
<table id="table" class="table table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Price Table</th>
<th>Product Code</th>
<th>Product Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
this is correct for Product Group 1, but Product Group 2 might require an additional column header for example.
I understand the easier option is to just create 2 pages and have 2 tables but I don't want that.
I hope I've explained clearly enough, if more details are needed etc. I can help. Appreciate any help from the experts!

Try this : You can use fnReloadAjax as shown below
HTML -
<select id="select1">
<option value="1">Product Group 1</option>
<option value="2">Product Group 2</option>
</select>
jQuery :
$(document).ready(function() {
var table = $('#table').dataTable( {
"ajax": {
"url": "../server_processing/prices.php",
"type": "POST"
},
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"order": [[ 1, "asc" ]],
"serverSide": true
} );
var tabletools = new $.fn.dataTable.TableTools( table, {
"dom": 'T<"clear">lfrtip',
"sSwfPath": "../copy_csv_xls_pdf.swf"
} );
$( tabletools.fnContainer() ).insertBefore('div.dataTables_wrapper');
//on change event handle for select box
$('#select1').on("change", function(){
var value = $(this).val();
table.fnReloadAjax( '../server_processing/prices.php?ProductGroup='+value );
});
} );

How to give a Confirmation Message on Datatable Page Navigation using jQuery?

I'm working on Asp .net MVC3.I'm using html table to display the table in front end.and i'm using datatable plugin for pagination,sorting and filtering.when user selects 2 records on page 1 and navigating to the next page confirmation box has to show as 'do you want to submit the selected values?' if the user clicks ok navigation has to be done otherwise it should remain on page1.Following is my table,
<table id="myIndiaTable">
<thead>
<th>Select All<input type="checkbox" class="chkheadind" onchange="Getchecked()" /></th>
#foreach (var item in Model.colName)
{
<th>#item.column_name</th>
}
</thead>
<tbody>
#foreach (var item in Model.bgv)
{
<tr>
<td><input type="checkbox" class="chkdataind"/></td>
<td id ="AsscId">#item.AsscID</td>
<td id ="AsscName">#item.AsscName</td>
<td>#Html.DropDownList("Education", new SelectList(Model.dd, "Validation_Code", "Validation_Status", #item.Education),new { style = "width: 80px;" })</td>
<td>#Html.DropDownList("Employment", new SelectList(Model.dd, "Validation_Code", "Validation_Status", #item.Employment),new { style = "width: 100px;" })</td>
<td>#Html.DropDownList("Criminal", new SelectList(Model.dd, "Validation_Code", "Validation_Status", #item.Criminal),new { style = "width: 80px;" })</td>
<td>#Html.DropDownList("DatabaseTest", new SelectList(Model.dd, "Validation_Code", "Validation_Status", #item.DatabaseTest),new { style = "width: 100px;" })</td>
</tr>
}
</tbody>
</table>
Following is the jquery,
<script type="text/javascript">
$("#myIndiaTable").dataTable({
"bFilter":true,
"bSort": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 5,
"aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
"bStateSave": true,
"bProcessing": true,
"bDeferRender":true
});
</script>

I have used
"fnDrawCallback": function (oSettings) {
}
to reinitialize something whenever the table is drawn again (its not only in the pagination case). This may not suit your case.
For pagination, the documentation suggest to use
"fnUpdate": function ( oSettings, fnCallbackDraw )
{
// check what you want
// return true or false. true is expected to paginate and false is expected not to paginate
}