Datatable Setting not working

jlivingston

I have the code below and when I run it the table is populated but the items in this section "$('#wellList').dataTable({" are not enabled (pagination, search, hiding the sixth column. Can someone please help with this?


var wellGroupChanged = function(wellGroupId)
{
$.ajax({
url: "vl.asp?a=wsBody",
dataType: "json",
data: { WellGroupType: '<%= WellGroupType %>', wgid: wellGroupId },
success: function(result){
//Redirect to login if user session has failed to authenticate for the upload destination
if ($(result).find('form[action="login.asp"]').length != 0) {
window.location = "login.asp";
}
else {
$("#listbody").empty();
$(result).each(function (i, item) {
var newTr = "" +
"" +
"Upload " +
"" +
"" +
"View " +
"" +
"" + item.API + " " +
"" + item.WellName + "" +
"" + item.RigName + "" +
"" + item.Asset + "" +
"" + item.LastFileDate + "" +
"";
$("#listbody").append($(newTr));
});

$('#wellList').dataTable({
"bFilter": true,
"bLengthChange": false,
"bSort": true,
"bScrollCollapse": true,
"aaSorting": [[6, 'desc']],
"bInfo": true,
"sScrollY": "400px",
"bPaginate": true,
"iDisplayLength": 20,
"oLanguage": {
"sSearch": "Filter:",
"oPaginate": {
"sNext": "",
"sPrevious": ""
}
},
"aoColumnDefs": [{ "aTargets": [6], "bVisible": false }]
});
$("#gloading").hide();
}
}
});
};

allan

Please link to a test case showing the issue: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read

Allan

jlivingston

Test case, http://live.datatables.net/ijadow/2/edit

essexsteph

OK, Allan's point about linking to test cases is well made...

Now we can see the code you can see the javascript error which is "Uncaught TypeError: Object [object Object] has no method 'dataTable' " - basically you haven't included the DataTables javascript so nothing initialises. If you look at http://live.datatables.net/ijadow/3/edit I've included it and it works!

Steph

jlivingston

I have a reference to that in my code -

This section $('#wellList').dataTable({
"bFilter": true,
"bLengthChange": false,
"bSort": true,............. was working when I was not using json to get my data. But, when I changed to the json datasource the problem presents itself.

In the OLD CODE below the entire HTML table was built in the called vl.asp page and then returned to the datatable. I was trying to improve performance by using JSON instead (I do not think it helped). I tried doing server side but being a novice I cannot figure out how to do it......

OLD CODE:
var wellGroupChanged = function(wellGroupId)
{
$.ajax({
url: "vl.asp?a=wsBody&WellGroupType=<%= WellGroupType %>&wgid=" + wellGroupId,
success: function(result){
//Redirect to login if user session has failed to authenticate for the upload destination
if ($(result).find('form[action="login.asp"]').length != 0) {
window.location = "login.asp";
}
else {
$("#tableHolder").empty();
$("#tableHolder").html($(result));
$('#wellList').dataTable({
"bFilter": true,
"bLengthChange": false,
"bSort": true,
"bScrollCollapse": true,
"aaSorting": [[6, 'desc']],
"bInfo": true,
"sScrollY": "400px",
"bPaginate": true,
"iDisplayLength": 20,
"oLanguage": {
"sSearch": "Filter:",
"oPaginate": {
"sNext": "",
"sPrevious": ""
}
},
"aoColumnDefs": [{ "aTargets": [6], "bVisible": false }]
});
$("#gloading").hide();
}
}
});
};

allan

Please link us to a test page showing what doesn't work, otherwise we are truly blindly guessing and wasting your time as well as our own. @essexsteph has shown how your previous test case can be made to work, so now please show us the page which is not working.

This is why linking to a test case is the only rule of this forum.

Allan