Javascript AJAX vs AJAX in Datatables.net - Why?

d052057

I ended up to code below because it is working. However, the logic I commented is not working. Can someone please, pinpoint why it is not working. It failed on error: function (response)....
I can give more codes if you need to see more detail.

Thanks you

$(document).ready(function () { loadData(); }); // What is wrong with the code? //$(document).ready(function () { //var refDataTable = $("#example").dataTable({ // processing: true, // serverSide: true, // ajax: { // data: '{}', // type: "POST", // url: "BolAddress.aspx/GetAddress", // contentType: "application/json; charset=utf-8", // dataType: "json", // success: function (response) { // alert(response.d); // }, // failure: function (response) { // alert(response.d); // }, // error: function (response) { // alert(response.d); // } // }, // columns: [ // { data: "CardId" }, // { data: "CardType" }, // { data: "Company" }, // { data: "Address" }, // { data: "City" }, // { data: "State" }, // { data: "Zip" }, // { data: "Phone" }, // { data: "Contact" }, // { data: "Description" } // ] //}) //}); // ------------------------------------------ function loadData() { $.ajax({ type: "POST", url: "BolAddress.aspx/GetAddress", data: '{}', contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { OnSuccess(response); }, failure: function (response) { alert(response.d); }, error: function (response) { alert(response.d); } }); }; function OnSuccess(response) { var cards = response.d; var cardtable = $("#example"); $(cards).each(function () { var row = $(""); cardtable.append(row); row.append($("" + this.CardId + "")); row.append($("" + this.CardType + "")); row.append($("" + this.Company + "")); row.append($("" + this.Address + "")); row.append($("" + this.City + "")); row.append($("" + this.State + "")); row.append($("" + this.Zip + "")); row.append($("" + this.Phone + "")); row.append($("" + this.Contact + "")); row.append($("" + this.Description + "")); }); var refDataTable = $("#example").dataTable(); }

d052057

Please read this code instead. This is more readable....

  <script type="text/javascript">
        $(document).ready(function () {
            loadData();
        });
// What is wrong with the code?
        //$(document).ready(function () {
            //var refDataTable = $("#example").dataTable({
            //    processing: true,
            //    serverSide: true,
            //    ajax: {                   
            //        data: '{}',
            //        type: "POST",
            //        url: "BolAddress.aspx/GetAddress",
            //        contentType: "application/json; charset=utf-8",
            //        dataType: "json",
            //        success: function (response) {
            //            alert(response.d);                      
            //        },
            //        failure: function (response) {
            //            alert(response.d);
            //        },
            //        error: function (response) {
            //            alert(response.d);
            //        }
            //    },
            //    columns: [
            //        { data: "CardId" },
            //        { data: "CardType" },
            //        { data: "Company" },
            //        { data: "Address" },
            //        { data: "City" },
            //        { data: "State" },
            //        { data: "Zip" },
            //        { data: "Phone" },
            //        { data: "Contact" },
            //        { data: "Description" }
            //    ]
            //})
        //});
// ------------------------------------------
        function loadData() {
            $.ajax({
                type: "POST",
                url: "BolAddress.aspx/GetAddress",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    OnSuccess(response);
                },
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        };
        function OnSuccess(response) {
            var cards = response.d;
            var cardtable = $("#example");
            $(cards).each(function () {
                var row = $("<tr />");
                cardtable.append(row);
                row.append($("<td>" + this.CardId + "</td>"));
                row.append($("<td>" + this.CardType + "</td>"));
                row.append($("<td>" + this.Company + "</td>"));
                row.append($("<td>" + this.Address + "</d>"));
                row.append($("<td>" + this.City + "</td>"));
                row.append($("<td>" + this.State + "</td>"));
                row.append($("<td>" + this.Zip + "</td>"));
                row.append($("<td>" + this.Phone + "</td>"));
                row.append($("<td>" + this.Contact + "</td>"));
                row.append($("<td>" + this.Description + "</td>"));
            });
            var refDataTable = $("#example").dataTable();
        }
    </script>

edited by allan syntax highlighting

kthorngren

When you post your code you should format it using Markdown as noted below the Post Comment button when you are entering your comment/code.

You are using $("#example").dataTable(); to initialize Datatables. Please read the first FAQ here:
https://datatables.net/faqs/index#Most-common-FAQs

If you are using a current (1.10) version of Datatables then you will want to use $("#example").DataTable(); instead. Note the capital D in Datatable.

Kevin

bindrid

Honestly, you need to do some research on how to use DataTables serverSide:true and what its implications are.

allan

To expand upon that a little - read over this section of the manual.

Also I'm not clear if you are just uncommenting the currently commented out code when you say it isn't working? If so, then you'd be initialising the table table twice, in completely different ways.

Allan

d052057

var refDataTable = $("#example").DataTable({
processing: true,
bserverSide: true,
stateSave: true,
stateDuration: -1,
dom: 'Blfrtip',
ajax: {
data: {},
type: "POST",
url: "BolAddress.aspx/GetAddressList",
contentType: "application/json; charset=utf-8",
dataType: "json",
dataSrc: function (response) {
return response.d.CardAddresses;
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.responseText);
}
},
buttons:
[{
text: 'Add',
className: 'btn btn-primary',
action: function (e, dt, node, config) {
AddRecord();
TogglePanelViews();
}
},
{
text: 'Delete',
className: 'btn btn-danger',
action: function (e, dt, node, config) {
e.preventDefault();
var CardIds = ''
$("input:checked", refDataTable.fnGetNodes()).each(function () {
if (CardIds == '') {
CardIds = $(this).val();
}
else {
CardIds = CardIds + '\t' + $(this).val();
}
});
if (CardIds !== '') {
$('#CardId').val(CardIds);
DeleteRecord();
}
}
}],
"columns": [
{ "data": "CardType" },
{ "data": "Company" },
{ "data": "Address" },
{ "data": "City" },
{ "data": "State" },
{ "data": "Zip" },
{ "data": "Phone" },
{ "data": "Contact" },
{ "data": "Description" },
{ "data": "CardId" }
],
'columnDefs': [
{
'targets': [9],
'searchable': false,
'width': '1%',
'orderable': false,
'render': function (data, type, full, meta) {
var text = '"' + data + '"';
return "

";
}
}
],
})
$("div.dt-buttons").append("

Enter User Id

");
});

d052057

var refDataTable = $("#example").DataTable({
processing: true,
bserverSide: true,
stateSave: true,
stateDuration: -1,
dom: 'Blfrtip',
ajax: {
data: {},
type: "POST",
url: "BolAddress.aspx/GetAddressList",
contentType: "application/json; charset=utf-8",
dataType: "json",
dataSrc: function (response) {
return response.d.CardAddresses;
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.responseText);
}
},
buttons:
[{
text: 'Add',
className: 'btn btn-primary',
action: function (e, dt, node, config) {
AddRecord();
TogglePanelViews();
}
},
{
text: 'Delete',
className: 'btn btn-danger',
action: function (e, dt, node, config) {
e.preventDefault();
var CardIds = ''
$("input:checked", refDataTable.fnGetNodes()).each(function () {
if (CardIds == '') {
CardIds = $(this).val();
}
else {
CardIds = CardIds + '\t' + $(this).val();
}
});
if (CardIds !== '') {
$('#CardId').val(CardIds);
DeleteRecord();
}
}
}],
"columns": [
{ "data": "CardType" },
{ "data": "Company" },
{ "data": "Address" },
{ "data": "City" },
{ "data": "State" },
{ "data": "Zip" },
{ "data": "Phone" },
{ "data": "Contact" },
{ "data": "Description" },
{ "data": "CardId" }
],
'columnDefs': [
{
'targets': [9],
'searchable': false,
'width': '1%',
'orderable': false,
'render': function (data, type, full, meta) {
var text = '"' + data + '"';
return "

";
}
}
],
})
$("div.dt-buttons").append("

Enter User Id

");
});