Develop Reference

implement datatable js in Asp.Net API server side processing

I'm using datatable.js, I have table in view and API returns JSON results. I have lots of rows and i want to bind them by each page.Is there any way that datatable do it for me? I read lots of documentation but I didn't find anything useful for API
API Controller
public IHttpActionResult Get(int id)
{
return Ok(_context.Students.OrderBy(c => c.id).Skip((id - 1) * 10).Take(10).ToList());
}
Here is my table config
<script>$(document).ready(function () {
var pageindex = 1;
var table = $("#staff").DataTable({
"processing": true,
"serverSide": true,
ajax: {
url: "/Api/staffs",
dataSrc: "",
data: {
id: pageindex,
},
},
columns: [
{
data: "stf_FirstName",
},
{
data: "stf_LastName",
},
{
data: "stf_Code",
}
]
});
table.on('page', function () {
Currentpagenum();
});
function Currentpagenum() {
var info = table.page.info();
pageindex = (info.page + 1);
}
});</script>

If there are lots of rows than server side processing should be used
Try this :
HTML :
<table id="tblGrid" class="table display nowrap" style="width:100%">
</table>
JS :
function SetGrid() {
$('#tblGrid').DataTable({
"proccessing": true,
"serverSide": true,
// server side
"ajax": {
url: "/api/YourController/Method",
type: 'POST',
"data": {
Param1: Value1
}
},
// if client side
//data: YourList, // Js Array
columns: [
{ data: 'Id' },
{ data: 'Name', title: "Name" },
...
...
{ title: "Actions"},
],
"columnDefs": [
{ targets: 0, visible: false,},
],
"ordering": false,
"lengthChange": false,
"pageLength": 10,
"bDestroy": true,
"oLanguage": {
"sEmptyTable": "No Record Found"
},
});
}
Sample C# :
public object YourMethod(Param1 Value1)
{
var start = int.Parse(HttpContext.Current.Request.Form["start"]);
var result = new {
draw = HttpContext.Current.Request.Form["draw"],
recordsTotal = YourList.Count,
recordsFiltered = YourList.Count,
data = YourList.Skip(start).Take(10).ToList()
};
return result;
}

Create Chart.JS dynamically from database values

I am using the jQuery-Plugin Chart.JS to create nice looking diagrams and graphs for my site - it works quite well if i'm using static values.
Now i am trying to create the chart dynamically from values that are stored in a table in a database.
I read quite a lot about how to do it (ajax-call etc.) but i can't just figure out where my fault is.
This is my script for the chart together with the ajax-method:
$(document).ready(function () {
$.ajax({
type: "POST",
url: "/ChartData.asmx/GetChartData",
data: jsonData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess_,
error: OnErrorCall_
});
// Defining chart.js-function to realize a woundchart with the size of the wound
function OnSuccess_(response) {
var aData = response.d;
var array = [];
$.each(aData, function (inx, val) {
var obj = {};
obj.value = val.value;
array.push(obj);
});
var woundchart = document.getElementById('chartForWound');
var chart = woundchart.getContext('2d');
var colorFade = chart.createLinearGradient(0, 0, 0, 500); // creating linear gradient with: (x0, y0, x1, y1)
// adding colorstops between 0 and 1 in the linear gradient
colorFade.addColorStop(0, "#FF0000");
colorFade.addColorStop(0.5, "#FFFF33");
colorFade.addColorStop(1, "#00FF33");
new Chart(chart, {
type: 'line', // defining type of the chart as linechart
data: {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], // Labels for x-Axis
datasets: [{
label: "Wundgröße in mm",
fill: false,
pointRadius: 5,
pointHoverRadius: 7,
borderColor: colorFade,
pointBorderColor: colorFade,
pointBackgroundColor: colorFade,
pointHoverBackgroundColor: colorFade,
pointHoverBorderColor: colorFade,
data: array, // TODO: entering values from database (y-values)
}]
},
// Defining further options to style the graph
options: {
responsive: true,
animation: {
duration: 4000, // time while animation is active (4000ms)
easing: 'easeInQuart' // style of the animation
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Zeit / Tage' // label for x-Axis
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Wundgröße / mm' // label for y-Axis
}
}]
}
}
});
}
});
And this is my method in my .asmx-File to get the values from the column in the database:
[WebMethod]
public List<ChartData> GetChartData(List<string> chartdata){
List<ChartData> woundData = new List<ChartData>();
ConnectionStringSettings connectionString = ConfigurationManager.ConnectionStrings["pflegedokumentationConnectionString"];
SqlConnection conn = new SqlConnection(connectionString.ConnectionString);
SqlCommand query = new SqlCommand("SELECT measurement_results FROM epadoc_mod_wound_chart_results", conn);
conn.Open();
SqlDataReader dr = query.ExecuteReader();
if (dr.HasRows)
{
while (dr.Read())
{
ChartData data = new ChartData();
data.value = Convert.ToInt32(dr["measurement_results"].ToString());
woundData.Add(data);
}
}
return woundData;
}
I dont get any error when running the code, the chart just isn't be created.

DataTable not showing JSON data

var table = $('#datatables').DataTable({
ajax: {
url: '#Url.Action("GetGrid","Vibrant", new { Area = "Marketing" })',
type: 'GET',
data: {
//filters here
columns: null,
filter: function () { return _filter; },
},
success: function (data) {
console.log("success", data);
},
error: function (data) {
console.log("error", data);
}
},
processing: true,
serverSide: true,
responsive: true,
pagingType: 'full_numbers',
language: {
search: "_INPUT_",
searchPlaceholder: "Search records",
},
columns: [
{ "data": "ID"},
{ "data": "PreviewID"},
{ "data": "EPCElement"},
{ "data": "Vibrant"}
],
method successfully returns data but the DataTable won't display it.
initialList = (from pjob in _db.PropertyJobs
select new SendVibrantOrderGridVM
{
ID = pjob.ID,
PreviewID = pjob.PreviewID,
EPCElement = pjob.EPCElement ,
Vibrant = pjob.Vibrant
}).ToList();
I am trying to populate my DataTable with the JSON Data I'd be getting within a call method.
This is a sample data returned by the GetGrid method:
{"data":[{"ID":529,"PreviewID":999992349,"EPCElement":false,"Vibrant":false}],"draw":1,"page":1,"pages":113,"length":10,"recordsTotal":1126,"recordsFiltered":1126}

jqgrid is not loading when searching by passing javascript object to asp.net webmethod

Hi tried to load the jqgrid with json by passing javascript object. but the grid is not loading.
Below is my javascript code
oSearchParam = {
InvoiceNo: document.getElementById('txtInvoiceNumber').value,
}
var grid = $("#dataGrid")[0];
//my code
$("#dataGrid").jqGrid({
// setup custom parameter names to pass to server
prmNames: {
rows: "numRows",
page: "page",
sort: "sortField",
order: "sortOrder"
},
// add by default to avoid webmethod parameter conflicts
// postData: { oSearchParam: oSearchParam },
// setup ajax call to webmethod
datatype: function (postdata) {
$(".loading").show(); // make sure we can see loader text
$.ajax({
url: 'InvoiceSearch.aspx/GetSearchResultData',
type: "POST",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(postdata),
dataType: "json",
success: function (data, st) {
if (st == "success") {
var grid = $("#dataGrid")[0];
alert(data.d);
grid.addJSONData(JSON.parse(data.d));
}
},
error: function () {
alert("Error with AJAX callback");
}
});
},
// this is what jqGrid is looking for in json callback
jsonReader: {
root: "rows",
page: "page",
total: "totalpages",
records: "totalrecords",
cell: "cell",
id: "id", //index of the column with the PK in it
repeatitems: true
},
autowidth: true,
shrinkToFit: true,
height: 'auto',
colNames: ['InvoiceNo'],
colModel: [
{ name: 'InvoiceNo', index: 'InvoiceNo', width: 55, search: false }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: jQuery("#pagingGrid"),
sortname: "InvoiceNo",
sortorder: "asc",
viewrecords: true,
caption: "Grid Title Here",
gridComplete: function () {
$(".loading").hide();
}
}).jqGrid('navGrid', '#pagingGrid', { edit: true, add: true, del: true },
{}, // default settings for edit
{}, // add
{}, // delete
{ closeOnEscape: true, closeAfterSearch: true }, //search
{}
)
And below is the webmethod
[WebMethod]
public static string GetSearchResultData(int? numRows, int? page, string sortField, string sortOrder, SearchParam oSearchParam)
{
DataTable dtInvoiceList = Mymethod();
var query = dtInvoiceList.AsEnumerable()
.Select(i => new SearchParam
{
InvoiceNo = i.Field<string>("InvoiceNo"),
// ImageId = i.Field<string>("DocID"),
InvoiceAmount = i.Field<decimal>("Amount"),
// ImageId = i.Field<string>("DocID"),
Status = i.Field<string>("Status"),
CurrentlyWith = i.Field<string>("CurrentlyWith")
}).ToList();
//--- setup calculations
int pageIndex = page ?? 1; //--- current page
int pageSize = numRows ?? 10; //--- number of rows to show per page
int totalRecords = query.Count(); //--- number of total items from query
int totalPages = (int)Math.Ceiling((decimal)totalRecords / (decimal)pageSize); //--- number of pages
var sortedRecords = query
.Skip((pageIndex - 1) * pageSize) //--- page the data
.Take(pageSize).ToList();
//--- format json
var jsonData = new
{
totalpages = totalPages, //--- number of pages
page = pageIndex, //--- current page
totalrecords = totalRecords, //--- total items
rows = (
from row1 in sortedRecords
select new
{
i = row1.ImageId,
cell = new string[] {
row1.InvoiceNo,
row1.Status,
row1.CurrentlyWith,
row1.InvoiceAmount.ToString(),
}
}
).ToArray()
};
string result = Newtonsoft.Json.JsonConvert.SerializeObject(jsonData);
return result;
}
My webmethod is not getting called.
Can anybody help me on this.

JSON returned from ASP.NET does not bind with Kendo grid

I can successfully make the AJAX call to my web method using the following code and web method return the JSON which is pasted below:
My Web Method
[WebMethod]
public static string GetJson()
{
string query = "SELECT top 10 cast(ClientUID as varchar) ClientUID FROM <tablename>";
SqlCommand cmd = new SqlCommand(query);
// Populate the DataSet.
DataSet data = GetData(cmd);
// return the Customers table as JSON.
DataTable dt = data.Tables[0];
var returnJSON = (from p in dt.AsEnumerable()
select new
{
ClientUID = p.Field<string>("ClientUID")
}).ToList();
var serializer = new JavaScriptSerializer();
string json = serializer.Serialize(returnJSON);
return json;
}
JSON returned by web method:
[{"ClientUID":"1"},{"ClientUID":"2"},{"ClientUID":"3"},{"ClientUID":"4"},{"ClientUID":"5"},{"ClientUID":"6"},{"ClientUID":"7"},{"ClientUID":"8"},{"ClientUID":"9"},{"ClientUID":"10"}]
Call to web method using AJAX
<script type="text/javascript">
$(document).ready(function() {
$.ajax(
{
type: "POST",
url: "ServeClientCalls.aspx/GetJson",
data: {},
contentType: "application/json;charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function(msg) {
//checking the content return from the above web method
$("#msg").html(msg.d);
//Binding to kendo Grid
$("#grid").kendoGrid({
dataSource: {
data: msg.d,
schema: {
model: {
fields: {
ClientUID: { type: "string" }
}
}
},
pageSize: 20
},
height: 430,
filterable: true,
sortable: true,
pageable: true,
columns: [
{ field: "ClientUID" }
]
});
},
error: function(x, e) {
$("#msg").html(x.responseText);
}
});
});
</script>
Problem : My grid does not bind and only headers are displayed whereas when I use the code in this manner mentioned below it is working
<script type="text/javascript">
$(document).ready(function() {
$.ajax(
{
type: "POST",
url: "ServeClientCalls.aspx/GetJson",
data: {},
contentType: "application/json;charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function(msg) {
//checking the content return from the above web method
$("#msg").html(msg.d);
**var p = [{ ClientUID: 1 }, { ClientUID: 2 }, { ClientUID: 3 }, { ClientUID: 4 }, { ClientUID: 5 }, { ClientUID: 6 }
, { ClientUID: 7 }, { ClientUID: 8 }
, { ClientUID: 9 }, { ClientUID: 10}];**
//Binding to kendo Grid
$("#grid").kendoGrid({
dataSource: {
**data: p,**
schema: {
model: {
fields: {
ClientUID: { type: "string" }
}
}
},
pageSize: 20
},
height: 430,
filterable: true,
sortable: true,
pageable: true,
columns: [
{ field: "ClientUID" }
]
});
},
error: function(x, e) {
$("#msg").html(x.responseText);
}
});
});
</script>

Use data: "d", under schema section. That should work.