Datatable not apply on dynamically created table using MVC - javascript

I am having issue with datatable in mvc application mvc has one common layout that is master page (Layout Page)
I have implement datatable commonly in master page (Layout page) that apply to all child pages
now , I am stuck with one challenge that is some tables are created dynamically on comobo box selection
Layout Page
$('.table').DataTable({
"aoColumnDefs": [
{
bSortable: false,
aTargets: [-1], /* 1st one, start by the right */
"defaultContent": "",
}
],
"fixedHeader": true,
"lengthChange": false,
"bPaginate": false,
"responsive": true,
"autoWidth": false,
"scrollY": "300px",
"scrollCollapse": true,
"paging": false,
initComplete: function (settings, json) {
this.api().columns().header().each(function (th) {
$(th).removeClass("sorting_asc");
$(th).removeClass("sorting");
}
)
},
});
Child (Partial View)
<div class="row">
<div class="col-md-12">
<br />
<div id="example"></div>
</div>
</div>
function GetEmails() {
var tbl = $('#example');
$.ajax({
url: '/test/GetTestData',
contentType: 'application/html ; charset:utf-8',
type: 'GET',
dataType: 'html'
}).success(function (result) {
tbl.empty().append(result);
}).error(function (result) {
alert("Fail");
});
}
Now , I have issue that
tbl.empty().append(result);
after append table in div , datatable not apply on this table, I am wondering that how can I able to notify in Layout page that table is append in child page
Let me know , there is any event in javascript or jquery that fire after append or something ??
Thanks in advance

Try this,
Its working
function ApplyDataTable()
{
$('#example').bind('DOMNodeInserted', function (event) {
if (event.type == 'DOMNodeInserted')
{
//Datatable for search and sorting
$(currntTable).DataTable({
"aoColumnDefs": [
{
bSortable: false,
aTargets: [-1], /* 1st one, start by the right */
"defaultContent": "",
}
],
"fixedHeader": true,
"lengthChange": false,
"bPaginate": false,
"responsive": true,
"autoWidth": false,
"scrollY": "300px",
"scrollCollapse": true,
"paging": false,
});
}
});
}

You can initialize datatable in success of ajax something like this,
$('.Table').DataTable();
But if you really want to add the datatable from layout only, then this should be helpful
$(document).ajaxComplete(function (event, xhr, settings) {
$('.Table').DataTable();
});

Related

Change the message in bar with no results after initcomplete

I'm using Datables and I need to set a message when the Datatable is being created. Also when it finishes I need it to change. I've got this so far. Any idea how I can make it work?
var dataTable = $('#example').DataTable({
"processing": true,
"serverSide": false,
"stateSave": true,
"aaSorting": [],
"deferRender": true,
"ajax": {
url: Link,
data: {
OpenDocs: '1'
},
type: "post"
},
language: {
"zeroRecords": " "
},
"initComplete": function(settings, json) {
language: {
"zeroRecords": " No data here. "
},
}
});
Just add this attribute it will work:
oLanguage: {
"sProcessing" : "Custom message while processing",
"sEmptyTable" : "My Custom Message On Empty Table"
}

DataTables TableTools export buttons not working

Using the code below, I can get the TableTools buttons to show up on the page, style correctly, and even change the mouse icon on the mouseover event, however the export function is not working. When I click on the button, nothing happens. Don't even get an error message.
The DataTable the TableTools plugin is working on does not exist on the page prior to the user hitting a "Search" button. Once this is done an Ajax call will pull the relevant data and create the DataTable. Again, this part of the program works fine, however when I click on the "Export" buttons (CSV, Excel, PDF)... nothing happens.
jQuery
$.ajax({
type: 'GET',
url: '#Url.Action("PensgcReport", "Home")',
data: { inputArray: inputArray },
traditional: true,
success: function (data) {
//Unpack return object into 2D array
var array = [];
$.each(data, function (key, value) {
var tempArray = [];
$.each(value, function(key, value) {
tempArray.push(value);
});
array.push(tempArray);
});
console.log(array);
$('#ReportTable').dataTable({
"bDestroy" : true,
"aaData": array,
"aoColumns": headers,
"bFilter": false,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"aaSorting": [],
"oLanguage": {
"sSearch": "Filter results:"
},
"sDom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "Content/media/copy_csv_xls_pdf.swf",
"aButtons":
[
{
'sExtends': 'csv',
"sFileName": "PENSGC_Report_" + new Date() + ".csv",
'mColumns': [0, 1]
},
{
'sExtends': 'xls',
"sFileName": "PENSGC_Report_" + new Date() + ".xls",
'mColumns': [0, 1]
},
{
'sExtends': 'pdf',
"sFileName": "PENSGC_Report_" + new Date() + ".pdf",
'mColumns': [0, 1]
},
]
}
});
}
})
HTML
This is the rendered HTML when the page loads (nothing special)
<table id="ReportTable" class="pretty">
</table>
Folder Structure
Change the swf path to:
"sSwfPath": "//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf"
var table = $('#mytable').dataTable({ YOUR OPTIONS});
var tableTools = new $.fn.dataTable.TableTools(table, {
"buttons": ["copy",
"csv",
"xls",
"pdf",{ "type": "print", "buttonText": "Print me!" } ],
"sSwfPath": "//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf" });
$(tableTools.fnContainer()).prependTo('#mytable_wrapper');

How to remove the next/previous tabs after the jQuery dataTable initialized from jSON?

A jQuery table is initialized from jSON
I know that it will be only one row, so I do not need to show the next/previous tabs after the table. Nevertheless they are displayed.
Is there any way of removing them?
The code for the table:
table = $("#retrievedTable").dataTable({
"bServerSide" : true,
"sAjaxSource" : "/cm/credit/getretrievedTable.json",
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "orderNumber", "value": $( "#orderNumberInput" ).val() } );
},
"bProcessing" : true,
"bInfo" : false,
"bRetrieve" : true,
"bDestroy" : true,
"bAutoWidth": false,
"bLengthChange": false,
"iDisplayLength": 20,
"aoColumnDefs": [{
"mRender": function ( data, type, row ) {
return moment(data).format("MM/DD/YYYY");
},
"aTargets": [ 0 ],
"bPaginate": false
}]
});
The only answer I can come up with is to hide it instead of removing it. You can do this by adding this to your css:
.dataTables_paginate {
display: none;
}
I've tried it with the example on the website. The css class was found on this page.

jQuery datatable - fnReloadAjax does not override sAjaxSource

I have the following code which shows all rows by default and when clicking the .view-unread-rows button the datatable should only show unread rows. However, it does not appear to be running the reload query.
$(".view-unread-rows").click( function(e) {
e.preventDefault();
message_table.fnReloadAjax("/letters/ajax/T");
message_table.fnDraw();
});
$(".view-all-rows").click( function(e) {
e.preventDefault();
message_table.fnReloadAjax("/letters/ajax/F");
message_table.fnDraw();
});
message_table = $('.message_table').dataTable({
"sPaginationType": "bootstrap",
"iDisplayLength": 10,
"iDisplayStart": 0,
"bProcessing": true,
"bServerSide": true,
"sServerMethod": "POST",
"sAjaxSource": "/letters/ajax/F",
"sDom": '<"top">rt<"bottom"><"clear">',
"aaSorting": [[3, 'desc']],
"aoColumns": [
{ "bSortable": false },
{ "bSortable": true },
{ "bSortable": false },
{ "bSortable": true }
],
"oLanguage": {
"sEmptyTable": "No results"
}
});
I have had this working but I've changed something at some point and it's now stopped. Any ideas?
EDIT:
OK, oddly enough, this seems to work fine if there are no results for clicking on .view-unread-rows.
Still no clue though.
$(this).on('click', '.view-unread-rows', function(e) { ...

Datatables : disable first next previous last and show / search record when processing

I am using Datatables 1.9 version
var oTable = $('#example').dataTable( {
"oLanguage": {"sSearch": "Search all columns:",
"sLengthMenu": "Display <select><option value='100'>100</option><option value='200'>200</option></select> records per page"
},
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"iDisplayStart": 0,
"iDisplayLength": 2000,
"bFilter": true,
"bInfo": true,
"bSort": true,
"sScrollX": "100%",
"sScrollY": "500px",
"bScrollCollapse": true,
"bPaginate": true,
"bSortClasses": true,
"bLengthChange": true,
"bProcessing": true,
"bDestroy": true,
"bServerSide": true,
"bDeferRender": true,
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "form_data", "value": data } );
},
"sAjaxSource": "search.py",
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (json)
{
fnCallback(json);
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
document.getElementById("bottom").focus();
},
"error": function (xhr, error, thrown) {
alert("An Error Occurred.!");
}
});
The issue is that when I run the search and datatables renders "Processing ..." text the "Show .. Search" and first next previous and last button also gets displayed. Is there a way that I defer there display when datatabales has processed or received response from backend.
You should include "bPaginate": false, into the configuration object you pass to your constructor parameters.
As seen here.
as it is data table
I didn't understand your question completly. If you want to hide those controlls you may try this..
Datatables comes with controls for filtering and pagination. These can be shown and hidden in a couple of ways (all examples in coffeescript):
Way 1
$("#myTable").dataTable
"bPaginate": false, #hide pagination control
"bFilter": false #hide filter control
Way 2: Use the "sDom" prop
$("#myTable").dataTable
"aaData": data
"sDom": 'ft'
Here 'f' means filter and 't' means table, so only show those. Order matters: 'ft' puts
the filter on top, whereas 'tf' will put it on bottom.
For more complex and other widgets, see Ref
Ref: http://datatables.net/usage/options#sDom
I got the answer from this link : https://gist.github.com/1568446
//Hide DataTables Length
<style>.dataTables_length {
display: none;
}
</style> //Hide Pagination
<style>.pagination {
display: none;
}
</style> //Hide DataTables Info
<style>.dataTables_info {
display: none;
}
</style>
This will work,but i am not recommending this
Note that this answer is consistent with version DataTables 1.13.1
This is all set with the arguments object given to initialize the table
const myTable = $('#example').dataTable( args );
To avoid Next / Previous / First / Last buttons on pagination:
const args = {pagingType: "numbers"};
Find here the 6 choices available for pagingType property
To show/hide the searching box:
const args = {searching: true/false};
I hope this helps

Categories