We Keep Coding

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"
}

Datatable not apply on dynamically created table using MVC

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();
});

Jquery.Datatable.js is taking time to render the records

I have a MVC application and I am fetching 5000 records from the database and returns in the JSOn format format in the action and rendering a Jquery.DataTable.js version 1.9.0 grid. The application is returning the data with no delay but it is taking time to render in the grid. Below is the code
$.ajax({
url: "http://locationhost/Mycontroller/myacton", type: "Get", contentType: "application/json; charset=utf-8",
data: { 'param': param1, 'param2': param2, },
dataType: "json",
success: function (data) {
$('#DisableDiv').html("");
var items = '';
var rows = '';
$('#divGrid').DataTable().fnClearTable();
$('#divGrid').DataTable().fnDestroy();
if (data.length > 0) {
$.each(data, function (i, item) {
rows = "<tr>........records......</tr>"
$('#divGrid tbody').append(rows);
});
table = $('#divGrid').DataTable({
"aoColumnDefs": [
{
'bSortable': false,
'aTargets': [0, 8],
}],
"aoColumns": [{ "bSortable": false }, null, null, null, null, null, { "sType": "currency" }, null, { "bSortable": false }],
"bPaginate": true,
"bInfo": true,
"bFilter": false,
"bLengthChange": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 10
});
table.fnSort([[7, 'desc']]);
}
else {
$('#DisableDiv').html("No data available.");
$("#btnDownload").attr("href", "#");
}
}
},
error: function (data) {
$('#DisableDiv').html("");
}
});

Server-side processing is best because when you render a large no of data set records client side
it makes it slow if you want to see please follow below links in that case
http://datatables.net/usage/server-side
example (http://datatables.net/release-datatables/examples/data_sources/server_side.html).

Adding html.actionLink to Jquery Datatable

want to add HTML.actionlink to Jquery Datatable.
Am wokrking on this existing site made by someone else. For adding data they used Jquery Datatable with is new to me.
This is the data table:
this.oUserList = $('#UserList').dataTable({
"bLengthChange": false,
"bSort": true,
"bRetreive": true,
"bDestroy": true,
"aaSorting": [[0, "asc"]],
"bProcessing": true,
"sAjaxSource": "#Url.Action("GetUsers","Users")",
"sAjaxDataProp": "Result",
"aoColumns": [
{ "mDataProp": function(source, type, val) {
return source.FirstName + ' ' + source.LastName;
}, "bSortable": true },
{ (1st column },
{ 2ndcolumn},
{
3rd column
}, "bSortable": false },
{
4th column
}, "bSortable": false
},
{
5th column
}, "bSortable": false
},
Here is where i want to change it to action link
{ (6th)
"mDataProp": function (source, type, val) {
return M2.JsonDateToString(source.DateLastLogin);
}, "bSortable": false
},
My 6th column is a duplicate of the 5th, but what i need here is an action link, like this: (How i normally implement them):
<td>#Html.ActionLink("Edit Roles", "Edit", "Users", new { userName = "User\\" + u.UserName }, new { #class = "action" }) </td>
So what I want to no is how do you add a html actionLink to a Jquery Datatable.

Use the source json object to build the anchor:
this should work
{
"mDataProp": function (source, type, val) {
return 'Edit Roles'
}, "bSortable": false
},

Use this article www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part

Datatables I can't call an onclick event after I paginate?

I am using http://datatables.net/
The demo table on their homepage resembles pretty much the exact same thing that i'm using (pagination, specifically), except each row has an area to click:
<%= Post.title %>
This link opens a jquery UI modal dialog which displays some information which is ajax requested.
Part 1 (solved), see part 2 below
I'm trying to run an onclick event which works normally on page one, but as soon as i go to page 2 (or any others) it stops working. I checked the source to make sure it wasnt doing anything funny in all the code is infact there (all the rows, even the ones hidden by the pagination)
Any ideas?
$(function() {
$('#dialog').dialog({
autoOpen: false,
resizable: false,
maxHeight: 600,
width: 650,
modal: true,
beforeClose: function close() {
$('#dialog').html('');
}
});
$('.show-post').click(function() {
clickLink(this);
return false;
});
});
Thanks to those who answered my question! I fixed that issue.
Part 2
my next 'issue' id like to get to work is... I'm using the left and right arrow keys to allow them to 'scan' to the next or previous row, and display the information. This is as opposed to closing it and then having to click the next one.
I'd like to make it so when you get to the bottom of page one, or top of page two, hidding next/previous respectively will automatically load that page, go to the top (or bottom), then open that dialog for that row on the other page.
heres my click function (i know its kind of probably not structured the best... im new to jquery)
$(document).ready(function() {
oTable = $('#posts').dataTable({
"bJQueryUI": true,
"iDisplayLength": 400,
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"aLengthMenu": [[-1, 400, 100, 50], ["All", 400, 100, 50]]
});
$(this).keydown(function(e) {
var id = $("#dialog").attr("data-id");
currentPost = $("#posts tr[data-id=" + id + "]");
if (e.keyCode == 39 && $('#dialog').html() != "") {
/* Remove current background */
$(currentPost).blur()
$(currentPost).removeClass("current");
$(currentPost).find("td.sorting_1").removeClass("current");
var next = currentPost.next().find(".show-post");
clickLink(next);
} else if (e.keyCode == 37 && $('#dialog').html() != "") {
/* Remove current background */
$(currentPost).removeClass("current");
$(currentPost).find("td.sorting_1").removeClass("current");
var prev = currentPost.prev().find(".show-post");
clickLink(prev)
}
});
});
heres the actual click function
function clickLink(src) {
var post = $(src);
var id = $(post).parent().parent().attr('data-id');
/* Set background for current line */
$(post).parent().parent().find("td.sorting_1").addClass("current");
$(post).parent().parent().addClass("current");
$('#dialog').attr("data-id", id);
$('#dialog').load('/show-post/' + id, function() {
$.ajax({
type: "POST",
url: "/checkstatus/" + id,
dataType: "html",
error: function(data){
$("#dialog").fadeOut("fast", function() {
$("#dialog").html("<img src='/img/invalid.jpg' alt='invalid' style='margin: 40px auto; display: block;'>").fadeIn("slow");
});
}
});
/* Set Visited */
$(post).parent().parent().removeClass("visited").addClass("visited");
$('#dialog').dialog({
title: post.html(),
beforeClose: function close() {
$(post).parent().parent().find("td.sorting_1").removeClass("current");
$(post).parent().parent().removeClass("current");
},
buttons: {
"Email 1": function() {
$.ajax({
type: "POST",
url: "/get-email/" + id + "/" + "1",
dataType: "html",
success: function(data) {
window.location.href = data + "&subject=" + post.html();
}
});
},
}
});
$('#dialog').dialog('open');
});
return false;
};

The example on the link you provided appears to be adding/removing DOM elements, meaning that elements on subsequent pages probably are not in the DOM on page load. Have you tried using event delegation?
$(<root element>).delegate('.show-post', 'click', function() {
clickLink(this);
return false;
});
Where <root element> can be document but should be set to an ancestor element that is always in the DOM.
.delegate():
Attach a handler to one or more events for all elements that match the
selector, now or in the future, based on a specific set of root
elements.
Source: http://api.jquery.com/delegate
UPDATE
Note that .delegate() is an alias of .on() now, so if you're using jQuery 1.7+ I would just use .on() right from the get-go. Almost the same syntax except the selector and event are swapped: $(<root element>).on('click', '.show-post', function() { ... });
Source: Thanks Greg Pettit, Excellent Comment

Below Code is working Perfectly. When you click the pagination button 'drawCallback' class Call some function after table load.
$("#YourTableID").dataTable({
bJQueryUI: false,
bFilter: false,
bSearchable: false,
bInfo: false,
bAutoWidth: false,
bDestroy: true,
"oLanguage": {
"sEmptyTable": "No Records Found"
},
"sPaginationType": "full_numbers",
"bLengthChange": false,
"iDisplayLength": 5,
aaData: arrv,
aoColumns: [{
sTitle: "Select",
orderable: false,
className: 'select-checkbox',
targets: 0
},
{
sTitle: "Course name"
}, {
sTitle: "Level"
}, {
sTitle: "Study Mode"
}, {
sTitle: "Entry Year"
}, {
sTitle: "Point of Entry"
}, {
sTitle: "Awarding qualification"
}],
drawCallback: function () {
//Some function...
},
select: {
style: 'os',
background: 'color:gray',
selector: 'td:first-child'
},
order: [[1, 'asc']],
});

As #scrappedcola pointed out in the comments, your click handler is lost after pagination. There is a drawCallback function for DataTables you can implement which will fire after the table is "re-drawn" (hence drawCallback). Here is an example:
$('#someId').DataTable({
lengthMenu: [ 25, 50, 100, 200 ],
order: [[ 0, 'asc' ]],
processing: true,
serverSide: true,
stateSave: true,
responsive: true,
bDestroy: true,
columns: [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
],
drawCallback: function() {
var api = this.api();
api.$('#someBtnId').click(function() {
// do some click handler stuff
});
}
});