Hi i need to load datatable data on button click event can any one provide me sample to acheve this

nallagnda

Hi i need to load datatable and bing to jquery grid on button click event my coad is I am getting response as a json format from server but it is not binding to jquery grid any body plz help me..

$("#btnGenerateReport").click(function () {
$.ajax({
url: "@Url.Action("AjaxNewSurveysList", "Reports")",
type: "post",
datatype: "json",
data: $('#stage2').serialize(),
success: function (response) {
debugger;
alert(response.aaData);
alert(datatable);
$("#DivReport").css("display", "block");
datatable.push(response.aaData);
datatable.fnDraw(true);

        },
        error: function (xhr, status, message) {
            //Trace the error with its 'status' (which is code) and error message in 'message'
        }
    });

});

rajivkumar87

you can use the below code. it is a function which you can call anywhere in your button click.

function fnLoadTable(user, soid) {
var oTable = $("#tablename").dataTable({
"aLengthMenu": [
[10, 20, 30, 40, 50, 60, 70, 80, 90, 100], [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
],
"aoColumns": [
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false }
],
"iDisplayLength": 10,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bAutoWidth": false,
"bServerSide": true,
"bDestroy": true,
"bFilter": false,
"oLanguage": {
"sLengthMenu": "MENU records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"bStateSave": false,
"sAjaxSource": "WebService.asmx/methodname",
"fnServerParams": function (aoData) {
aoData.push({ "name": "UserId", "value": user },
{ "name": "SoId", "value": soid });
},
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "GET",
"url": sSource,
"data": aoData,
"success":
function (msg) {
if (msg.d != "") {
var json = jQuery.parseJSON(msg.d);
fnCallback(json);
$("#tablename").show();
}
else {
ExternalSessionExpiry();
}
}
});
}
});
jQuery('#tablename .dataTables_length select').addClass("m-wrap small"); // modify table per page dropdown
}

this is a working code

nallagnda

Hi Rajiv,
Thanks for your help when I tried your code I am getting the fallowing error "Uncaught TypeError: $(...).dataTable is not a function" at "var oTable = $("#tablename").dataTable({ "aLengthMenu": [ [10, 20, 30, 40, 50, 60, 70, 80, 90, 100], [10, 20, 30, 40, 50, 60, 70, 80, 90, 100] ], " can you please help me to solve this error.

nallagnda

I am Using Jquery Data tables version 1.9.4, and Jquery version 1.10.1

jLinux

Guys.. format the code.. its a whole 6 extra characters. The instructions are right below the input box for replies...

nallagnda

Hi my formatted and corrected code as show in below
"function fnLoadTable()
{
var oTable = jQuery("#tblSurveysBreakDown").dataTable({
"aLengthMenu":[10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
"aoColumns": [{ "bSortable": false, "sName": "ClientSurveyId" }],
"iDisplayLength": 10,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bAutoWidth": false,
"bServerSide": true,
"bDestroy": true,
"bFilter": false,
"oLanguage":{ "sLengthMenu": "MENU records per page",
"oPaginate": { "sPrevious": "Prev", "sNext": "Next" } },
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", "bStateSave": false,
"sAjaxSource": "@Url.Action("AjaxNewSurveysList", "Reports")",
"fnServerParams": function (aoData)
{
aoData.push($('#stage2').serialize());
},
"fnServerData": function (sSource, aoData, fnCallback)
{
$.ajax({ "dataType": 'json', "contentType": "application/json; charset=utf-8",
//type: 'POST',
"url": sSource,
"data": aoData,
"dataSrc": "",
"success": function (msg) {
if (msg.aaData != "")
{

                         $("#DivReport").css("display", "block");
                         var json = jQuery.parseJSON(JSON.stringify(msg.aaData));
                         alert(json);
                         fnCallback(json); $("#tblSurveysBreakDown").show();
                     } else {
                         //ExternalSessionExpiry();
                     }
                 }
             });
            }
        });
        jQuery('#tblSurveysBreakDown .dataTables_length select').addClass("m-wrap small");
    // modify table per page dropdown
    }"

but I am getting the fallowing error "Uncaught TypeError: Cannot read property 'length' of undefined"

My tabel structure is as fallows

ClientSurveyId
ClientSurveyId

and I am getting the result as "321,459,458,745" from ajax call
I am getting the fallowing error "Uncaught TypeError: Cannot read property 'length' of undefined" can you plz help me to solve the problem

jLinux

That looks formatted to you?

I cant help if i cant read it. Sorry.

nallagnda

sorry for the inconvinence I am sending my formated code right now..

function fnLoadTable()
        {
            var oTable = jQuery("#tblSurveysBreakDown").dataTable({
                "aLengthMenu":[10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
                "aoColumns": [{ "bSortable": false, "mDataProp": "ClientSurveyId" }],
                "iDisplayLength": 10,
                "bPaginate": true,
                "sPaginationType": "bootstrap",
                "bProcessing": true,
                "bServerSide": true,
                "bDestroy": true,
                "bFilter": false,
                "sAjaxSource": 'DataProvider',
                "sAjaxDataProp":"",
                "oLanguage": { "sLengthMenu": "MENU records per page" },
                //"oPaginate": { "sPrevious": "Prev", "sNext": "Next" } },
                //"sDom": 'T<"clear"><"clear"><"col-md-4 padding-top-15" l>r<"col-md-4 padding-top-15 padding-bottom-5 pull-right nopaddRight"C>t<"col-md-6" i><"col-md-6" p>',
                "sAjaxSource": "@Url.Action("AjaxNewSurveysList", "Reports")",
                "fnServerParams": function (aoData)
                {
                 aoData.push($('#stage2').serialize());
                },
                "fnServerData": function (sSource, aoData, fnCallback)
                {
                 $.ajax({ "dataType": 'json', "contentType": "application/json; charset=utf-8",
                     //type: 'POST',
                     "url": sSource,
                     "data": aoData,
                     "success": function (msg) {
                         if (msg.aaData != "")
                         {
                             $("#DivReport").css("display", "block");
                             var json = jQuery.parseJSON(JSON.stringify(msg.aaData));
                             fnCallback(json); $("#tblSurveysBreakDown").show();
                             //var tr = [];
                             //for (var i = 0; i < json.length; i++) {
                             //    tr.push('<tr>');
                             //    tr.push("<td>" + json[i][0] + "</td>");
                             //    tr.push('</tr>');
                             //}
                             //$('#tblSurveysBreakDown').append($(tr.join('')));
                         } else {
                             //ExternalSessionExpiry();
                         }
                     }
                 });
                },
                
            });
            jQuery('#tblSurveysBreakDown .dataTables_length select').addClass("m-wrap small");
        // modify table per page dropdown
        }```

and my table desgn is as fallows:

ClientSurveyId
ClientSurveyId

```
and I am getting the result as "321,459,458,745" from ajax call I am getting the fallowing error "Uncaught TypeError: Cannot read property 'length' of undefined" can you plz help me to solve the problem

nallagnda

function fnLoadTable()
        {
            var oTable = jQuery("#tblSurveysBreakDown").dataTable({
                "aLengthMenu":[10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
                "aoColumns": [{ "bSortable": false, "mDataProp": "ClientSurveyId" }],
                "iDisplayLength": 10,
                "bPaginate": true,
                "sPaginationType": "bootstrap",
                "bProcessing": true,
                "bServerSide": true,
                "bDestroy": true,
                "bFilter": false,
                "sAjaxSource": 'DataProvider',
                "sAjaxDataProp":"",
                "oLanguage": { "sLengthMenu": "MENU records per page" },
                //"oPaginate": { "sPrevious": "Prev", "sNext": "Next" } },
                //"sDom": 'T<"clear"><"clear"><"col-md-4 padding-top-15" l>r<"col-md-4 padding-top-15 padding-bottom-5 pull-right nopaddRight"C>t<"col-md-6" i><"col-md-6" p>',
                "sAjaxSource": "@Url.Action("AjaxNewSurveysList", "Reports")",
                "fnServerParams": function (aoData)
                {
                 aoData.push($('#stage2').serialize());
                },
                "fnServerData": function (sSource, aoData, fnCallback)
                {
                 $.ajax({ "dataType": 'json', "contentType": "application/json; charset=utf-8",
                     //type: 'POST',
                     "url": sSource,
                     "data": aoData,
                     "success": function (msg) {
                         if (msg.aaData != "")
                         {
                             $("#DivReport").css("display", "block");
                             var json = jQuery.parseJSON(JSON.stringify(msg.aaData));
                             fnCallback(json); $("#tblSurveysBreakDown").show();
                             } else {
                             //ExternalSessionExpiry();
                         }
                     }
                 });
                },
                
            });
            jQuery('#tblSurveysBreakDown .dataTables_length select').addClass("m-wrap small");
        // modify table per page dropdown
        }