How to setup server side pagination with jquery datatable - c#

I am trying to setup server side pagination with datatable.
I have used the same following technique in asp.net mvc but somehow its not working with asp.net (webforms).
Following is my .aspx page:
<table class="table table-striped table-bordered table-hover dt-responsive" id="tbl-1" cellspacing="0" width="100%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script>
var oTable = $('#tbl-1').DataTable({
"aoColumnDefs": [
],
"serverSide": true,
"ajax": {
"type": "POST",
"url": '/mypage.aspx/myMethod',
"contentType": 'application/json; charset=utf-8',
'data': function (data) {
console.log(data);
return data = JSON.stringify(data);
},
'async': true
},
"scrollY": 300,
"processing": true,
"paging": true,
"deferRender": true,
"columns": [
{ "data": "Column1" },
{ "data": "Column2" },
{ "data": "Column3" }
]
});
</script>
and following is my c# webmothod:
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet=false)]
public static List<myClass> myMethod(DTVM param)
{
List<myClass> listmyClass = new List<myClass>();
return listmyClass;
}
but somehow i am getting following error:
Invalid web service call, missing value for parameter: 'param'.
Please guide me what i am doing wrong.
Thanx.

Related

Jquery Data Table - No data available in table

I have developed an application using .net core. One of my requirements is datatables. In my controller I am calling a REST Api service and returning a Json result. The view is pretty straight forward in that of my html table and the AJAX call to the controller for data. Upon execution of the application my datatable shows up with 'No data available in table'
<table id="datatable">
<thead class="thead-light">
<tr role="row">
<th class="table-column-pr-0 sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 44px;">
<div class="custom-control custom-checkbox">
<input id="datatableCheckAll" type="checkbox" class="custom-control-input">
<label class="custom-control-label" for="datatableCheckAll"></label>
</div>
</th>
<th class="table-column-pl-0 sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 299px;">UserID</th>
<th class="table-column-pl-0 sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 299px;">UserName</th>
<th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 195px;">DepartmentID</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js">
</script>
<script>
$(function () {
$.ajax({
type: "POST",
url: "/ApplicationUsers/LoadData",
data: '{}',
contentType: "application/json; charset=utf-8",
headers: { 'Access-Control-Allow-Origin': '*' },
dataType: "json",
success: function (response) {
OnSuccess(response);
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
});
// INITIALIZATION OF DATATABLES
// =======================================================
function OnSuccess(response) {
console.log(response);
$.noConflict();
$('#datatable').DataTable(
{
dom: 'Bfrtip',
bLengthChange: true,
lengthMenu: [[5, 10, -1], [5, 10, "All"]],
bFilter: true,
bSort: true,
bPaginate: true,
searching: false,
data: response,
columns: [
{ 'data': 'userID', "defaultContent": "", },
{ 'data': 'userName', "defaultContent": "", },
{ 'data': 'departmentID', "defaultContent": "", }]
});
};
</script>
public class ApplicationUsersController : Controller
{
[HttpGet]
public ActionResult Users()
{
return View();
}
[HttpPost]
public ActionResult LoadData()
{
var data = ClaimsService.GetUsers();
return Json(new { data = data});
}
}
JSON DATA
{"data":{"result":[{"userID":322,"userName":"Ashnee","departmentID":3,"branchID":1,"name":"Ashnee Pillay ","emailAddress":"Ashnee#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":323,"userName":"BalanC","departmentID":15,"branchID":5,"name":"Balan Chetty ","emailAddress":"BalanC#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":328,"userName":"BrettL","departmentID":1,"branchID":1,"name":"Brett Lange ","emailAddress":"BrettL#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":334,"userName":"CoenieB","departmentID":14,"branchID":4,"name":"Coenie De Beer ","emailAddress":"CoenieB#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":337,"userName":"TraceyA","departmentID":61,"branchID":30,"name":"Tracey De Andrade ","emailAddress":"TraceyA#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":350,"userName":"HenryB","departmentID":18,"branchID":8,"name":"Henry Barber ","emailAddress":"HenryB#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":351,"userName":"HowardG","departmentID":6,"branchID":1,"name":"Howard Gains ","emailAddress":"HowardG#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":354,"userName":"IreneK","departmentID":17,"branchID":7,"name":"Irene Koegelenberg ","emailAddress":"IreneK#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":356,"userName":"JayM","departmentID":2,"branchID":1,"name":"Jay Mahillal ","emailAddress":"JayM#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":359,"userName":"TheshniR","departmentID":4,"branchID":1,"name":"Theshni Reddy ","emailAddress":"TheshniR#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":363,"userName":"Mariov","departmentID":15,"branchID":5,"name":"Mario Vincent ","emailAddress":"mariov#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":366,"userName":"Rehana","departmentID":3,"branchID":1,"name":"Rehana Adams ","emailAddress":"Rehana#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":368,"userName":"FrancoisC","departmentID":19,"branchID":9,"name":"Francois Cloete ","emailAddress":"FrancoisC#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":369,"userName":"CharneW","departmentID":22,"branchID":10,"name":"Charne Wagner ","emailAddress":"CharneW#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":372,"userName":"Rajeshree","departmentID":3,"branchID":1,"name":"Rajeshree Singh ","emailAddress":"Rajeshree#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":377,"userName":"SamanthaM","departmentID":2,"branchID":1,"name":"Samantha Murugan ","emailAddress":"SamanthaM#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":381,"userName":"SueP","departmentID":2,"branchID":1,"name":"Sue Pillay ","emailAddress":"SueP#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":382,"userName":"Sunitha","departmentID":3,"branchID":1,"name":"Sunitha Kandhai ","emailAddress":"Sunitha#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":385,"userName":"TraceyL","departmentID":20,"branchID":12,"name":"Tracey Lambooy ","emailAddress":"TraceyL#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":387,"userName":"Vinola","departmentID":80,"branchID":30,"name":"Vinola Kalideen ","emailAddress":"Vinola#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":397,"userName":"MarioL","departmentID":5,"branchID":1,"name":"Mario Luis","emailAddress":"MarioL#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":403,"userName":"SteveJ","departmentID":9,"branchID":14,"name":"Steve Jarman","emailAddress":"SteveJ#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":404,"userName":"MarkN","departmentID":18,"branchID":1,"name":"Mark Naicker","emailAddress":"MarkN#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":406,"userName":"MosesQ","departmentID":18,"branchID":8,"name":"MosesQwabe","emailAddress":"MosesQ#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":407,"userName":"Evonn","departmentID":3,"branchID":1,"name":"Evonn Naicker","emailAddress":"Evonn#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":417,"userName":"Brandon","departmentID":18,"branchID":8,"name":"Brandon Booysen","emailAddress":"BrandonBO#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":419,"userName":"SifisoD","departmentID":9,"branchID":14,"name":"Sifiso Dlamini","emailAddress":"SifisoD#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":423,"userName":"Jnb.Workshop","departmentID":9,"branchID":14,"name":"Jnb.Workshop","emailAddress":"Jnb.Workshop#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":425,"userName":"PrenishaS","departmentID":15,"branchID":5,"name":"Prenisha Sami","emailAddress":"Prenishas#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":426,"userName":"Pzb.Operations","departmentID":20,"branchID":12,"name":"Gift Kunene","emailAddress":"Pzb.Operations#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":427,"userName":"SalomeM","departmentID":18,"branchID":8,"name":"Salome Mokwele","emailAddress":"SalomeM#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":431,"userName":"GeorgeH","departmentID":12,"branchID":3,"name":"George Horn","emailAddress":"GeorgeH#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":434,"userName":"NadineF","departmentID":22,"branchID":10,"name":"Nadine Feldtmann","emailAddress":"NadineF#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":435,"userName":"ThiroshanN","departmentID":2,"branchID":1,"name":"Thiroshan Naicker","emailAddress":"ThiroshanN#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":442,"userName":"GeneN","departmentID":14,"branchID":4,"name":"Gene Naidoo","emailAddress":"GeneN#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":444,"userName":"Jnb.Boardroom","departmentID":1,"branchID":1,"name":"Jnb.Boardroom","emailAddress":"Jnb.Boardroom#Tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":447,"userName":"Mariob","departmentID":65,"branchID":37,"name":"Mario Botha","emailAddress":"Mariob#tritonfleet.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":449,"userName":"KureshaM","departmentID":3,"branchID":1,"name":"Kuresha Moodley","emailAddress":"KureshaM#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":453,"userName":"SeanR","departmentID":3,"branchID":1,"name":"Sean Raidoo","emailAddress":"SeanR#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":459,"userName":"SalonaB","departmentID":3,"branchID":1,"name":"Salona Balram","emailAddress":"SalonaB#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":460,"userName":"JohannesS","departmentID":18,"branchID":8,"name":"Johannes Van Staden","emailAddress":"JohannesS#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":463,"userName":"Dannyg","departmentID":15,"branchID":5,"name":"Danny Govender","emailAddress":"dannyg#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":466,"userName":"Shaneilr","departmentID":5,"branchID":1,"name":"Shaneil","emailAddress":"shaneilr#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":468,"userName":"BlessingM","departmentID":19,"branchID":9,"name":"Blessing Mlimi","emailAddress":"BlessingM#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":477,"userName":"EnvorS","departmentID":13,"branchID":2,"name":"Envor Swart","emailAddress":" envors#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":481,"userName":"FritzB","departmentID":59,"branchID":25,"name":"Fritz Beudeker","emailAddress":"FritzB#tritonscs.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":483,"userName":"JuanP","departmentID":6,"branchID":1,"name":"Juan Potgieter","emailAddress":"JuanP#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":484,"userName":"NonhlanhlaMn","departmentID":18,"branchID":8,"name":"Nonhlanhla Mnguni ","emailAddress":"NonhlanhlaM#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":488,"userName":"WinnieM","departmentID":18,"branchID":8,"name":"Winnie Mbongo","emailAddress":"WinnieM#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":492,"userName":"JaendreS","departmentID":16,"branchID":6,"name":"Jaendre Serfontein","emailAddress":"JaendreS#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":497,"userName":"TshepoM","departmentID":18,"branchID":8,"name":"Tshepo Mbele","emailAddress":"TshepoM#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":498,"userName":"ItumelengL","departmentID":18,"branchID":8,"name":"Itumeleng Leso","emailAddress":"ItumelengL#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":499,"userName":"Raynoldn","departmentID":18,"branchID":8,"name":"Raynold Ngwane","emailAddress":"Raynoldn#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":504,"userName":"JarredM","departmentID":58,"branchID":24,"name":"Jarred Metzler","emailAddress":"JarredM#tritonscs.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":511,"userName":"MagdaG","departmentID":6,"branchID":1,"name":"Magda Greeff","emailAddress":"MagdaG#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":513,"userName":"WinstonB","departmentID":55,"branchID":28,"name":"Winston Blaine","emailAddress":"WinstonB#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":517,"userName":"ByronV","departmentID":27,"branchID":17,"name":"Byron Vickers ","emailAddress":"ByronV#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":521,"userName":"GertH","departmentID":61,"branchID":48,"name":"Gert Hael ","emailAddress":"GertH#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":523,"userName":"Nomsat","departmentID":88,"branchID":45,"name":"Nomsa Tshabalala","emailAddress":"NomsaT#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":527,"userName":"AndrewJ","departmentID":18,"branchID":8,"name":"Andrew Julius","emailAddress":"AndrewJ#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":528,"userName":"LeeH","departmentID":4,"branchID":1,"name":"Lee Hamberger","emailAddress":"LeeH#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":530,"userName":"KevinS","departmentID":4,"branchID":1,"name":"Kevin Smith","emailAddress":"KevinS#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":532,"userName":"PhumeleleM","departmentID":63,"branchID":33,"name":"Phumelele","emailAddress":"PhumeleleM#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":533,"userName":"GiftK","departmentID":20,"branchID":12,"name":"Gift Kunene","emailAddress":"Giftk#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":534,"userName":"MiguelF","departmentID":55,"branchID":28,"name":"Miguel","emailAddress":"MiguelF#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":535,"userName":"BilkisA","departmentID":2,"branchID":1,"name":"Bilkis Ahmod","emailAddress":"bilkisa#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":539,"userName":"HermanK","departmentID":24,"branchID":15,"name":"Herman Kleynhans","emailAddress":"HermanK#tritonexpress.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":543,"userName":"SomP","departmentID":58,"branchID":24,"name":"Som Pillay","emailAddress":"SomP#tritonscs.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"},{"userID":544,"userName":"AndriesG","departmentID":73,"branchID":42,"name":"Andries Greyling","emailAddress":"AndriesG#tritonscs.co.za","archive_User":"0","managerID":0,"isHeadOffice":0,"statusID":1,"statusDate":"0001-01-01T00:00:00"}],"id":1601,"exception":null,"status":5,"isCanceled":false,"isCompleted":true,"isCompletedSuccessfully":true,"creationOptions":0,"asyncState":null,"isFaulted":false}}
Your JSON data has the following overall structure:
{
"data": {
"result": [
{...},
{...},
{...},
...
{...}
],
"id": 1601,
"exception": null,
...
"isFaulted": false
}
}
The "result": [ ] array is where you see the data needed to populate the table. Each {...} object in that array represents one row of table data.
Therefore you have to point DataTables at that array, so it knows where, inside your JSON, to look for the data it will display. DataTables will automtically handle iteration over each item in that array.
This is why you needed to change this:
data: response,
to this:
data: response.data.result,
in your DataTable definition. Here, response is the name of the variable containing the overall response JSON. And data.result is the specific location inside that JSON where your table data is stored.

DataTable doesn't effect on the table

I am using DataTable library in MVC, but it doesn't work
this is the view Part
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Id</th>
<th>Phone</th>
<th>FirstName</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Phone</th>
<th>FirstName</th>
<th>LastName</th>
</tr>
</tfoot>
</table>
<script type="text/javascript">
//$(document).ready(function () {
// $('#example').DataTable();
//})
$(document).ready(function () {
GetEmployeeRecord();
})
var GetEmployeeRecord = function () {
$.ajax({
type: "Get",
url: "/BasicInfo/GetCustomers",
success: function (response) {
alert("success");
BindDataTable(response);
},
error: function () {
alert("error");
}
})
}
var BindDataTable = function (response) {
$("#example").DataTable({
"aaData": response,
"aoColumns": [
{ "mData": "Id" },
{ "mData": "Phone" },
{ "mData": "FirstName" },
{ "mData": "lastName" }
]
});
}
and this is Controller Part
public JsonResult GetCustomers()
{
SalonEntities db = new SalonEntities();
List<Customer> CustomerList = db.Customers.OrderByDescending(a => a.ID).ToList();
return Json(CustomerList , JsonRequestBehavior.AllowGet);
}
although the CustomerList in controller is loaded but it returns to the view it enters the error section of jquery
what could be the problram
The ajax call to your controller failed. To debug this, you can do two things:
Alert the error
Remove the (dobule quote) " to alert the actual error.
error: function () {
alert(error);
}
You will most probably be able to see it in developer tools in your console.
Check the network tab
In your network tab, you'll see the error (4XX, 5XX) or something like that with some extra information (if you are lucky).
If no more information is there and you have an error 500, you need to check the exception in your backend code.

jQuery datatable throwing error when foreach loop loading data

I am getting an error
Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
at Ha (jquery.dataTables.min.js:24)
from my code shown below. I don't see any fault in my code. when iterating dictionary values it is throwing the error. If I comment foreach loop, the datatable is loading properly with headers. What could be the problem?
<table class="dataTableWrapper" id="dynamic_table_container" data-target="#categories">
<thead>
<tr>
<th>COUNTRY</th>
<th>CATEGORY</th>
</tr>
</thead>
<tbody>
#foreach (var country in countrieslstAndPriceGroup)
{
<tr>
<td>#country.Key</td>
<td>#country.Value</td>
</tr>
}
</tbody>
</table>
<script language="javascript">
$(function() {
var t = $('#dynamic_table_container').DataTable({
"pageLength": 25,
"columnDefs": [
{ // set default column settings
"orderable": false,
"targets": [1, 2, 4]
}
],
"bFilter": false
});
});
</script>

Getting "Not Found" when trying to retrieve data for DataTable

I´m working on asp.net WebApi with Angular doing DataTable.
View:
<table class="table table-striped table-hover table-bordered dt-bootstrap no-footer" id="tabla_catalogos" role="grid" aria-describedby="sample_editable_1_info">
<thead>
<tr>
<th class="hidden"></th>
<th style="width: 200px;"> Codigo </th>
<th> Nombre </th>
</tr>
</thead>
<tbody></tbody>
</table>
Angular control:
$scope.filtro = function (selected) {
apiService.get("../../api/Catalogo/GetCatalogoRegistro/" + selected.ID);
}
Here I get values (I recieve 5 values) but for dataTable I only need Codigo and Nombre, If I test it separately I recieve parameters without problems.
So now I use it into url parameter of datatable
Data Table:
$('#tabla_catalogos').DataTable({
searching: true,
dom: 'ftpB',
buttons: [
'excelHtml5', 'csv', 'print'
],
paging: true,
select: {
style: 'single'
},
info: false,
ordering: true,
"processing": true,
ajax: {
method: 'GET',
url: $scope.filtro = function (selected) {
apiService.get("../../api/Catalogo/GetCatalogoRegistro/" + selected.ID);
},
dataSrc: '',
beforeSend: function (request) {
request.setRequestHeader("Version", $scope.usuario.Version);
request.setRequestHeader("Origen", 'Web');
}
},
columns: [
{ data: 'Codigo' },
{ data: 'Nombre' },
],
pageLength: 10
, language: {
"emptyTable": "No se encontraron registros",
"zeroRecords": "No encontraron coincidencias",
"search": "Buscar: "
}
});
But in Chrome console, I get this error:
NOT FOUND 404:
http://localhost:55720/api/Catalogo/GetCatalogoRegistro/%22%20+%20selected.ID);%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D?_=1492444754842

Hidden field id is not showing correcly in second page

I am a beginner in jQuery dataTable, last day I implement dataTable 1.10 in my website.
I try to popup the id field in alert window in the selected row.
The first page is works correctly but when I go to the second page I click the
row id is 11. but popup is showing the id of the clicked row is 1.
All pages are showing this error, it's only working correctly in first page.
Please see my code below.
Script
$(document).ready(function () {
//$("#tblProvider").dataTable().destroy();
$("#tblProvider").dataTable({
bProcessing: true,
bPaginate: true,
bLengthChange: false,
bSort: true,
sAjaxSource: '#Url.Action("JsonGetAllTariffPosition", "Admin")',
aoColumns: [
{ sTitle: "Id", bVisible: true, bSortable: false },
{ sTitle: "Number", bSortable: false },
{
sTitle: "Action",
bSortable: false,
mRender: function (o) { return '<i class="ui-tooltip fa fa-pencil" data-toggle="modal" style="font-size: 22px;" data-original-title="Edit"></i><i class="ui-tooltip fa fa-trash-o" style="font-size: 22px;" data-original-title="Delete"></i>'; }
}
],
});
$("#tblProvider").on('click', 'tr td i[class="ui-tooltip fa fa-pencil"]', function () {
var row_index = $(this).closest('td').parent()[0].sectionRowIndex //you need to determine this how ever you like
var table = $('#tblProvider').DataTable()
var column_data = table.row(row_index).data()[0];
alert(column_data);
});
});
Html
<table id="tblProvider"
class="table table-striped table-bordered table-hover table-highlight table-checkable"
data-search="true"
data-paginate="true">
<thead>
<tr>
<th>Id</th>
<th>Tariff Position</th>
#*<th>General Tax</th>
<th>Consumption Tax</th>*#
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Replace the code in your click handler with this
var node = $(this).closest('tr')
var table = $('#tblProvider').DataTable()
var column_data = table.row(node).data()[0];

Categories