Hi i need to load datatable data on button click event can any one provide me sample to acheve this
Hi i need to load datatable data on button click event can any one provide me sample to acheve this
nallagnda
Posts: 8Questions: 1Answers: 0
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'
}
});
});
This discussion has been closed.
Answers
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
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.
I am Using Jquery Data tables version 1.9.4, and Jquery version 1.10.1
Guys.. format the code.. its a whole 6 extra characters. The instructions are right below the input box for replies...
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 != "")
{
but I am getting the fallowing error "Uncaught TypeError: Cannot read property 'length' of undefined"
My tabel structure is as fallows
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
That looks formatted to you?
I cant help if i cant read it. Sorry.
sorry for the inconvinence I am sending my formated code right now..
```
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