Aspx Url Produces A Json String, Consume With Jquery Datatable

For practice, I am trying to display JSOn data into a datatable in my aspx webpage, but the datatable is stuck with the word processing. Turns out when I inspect the console, the e

Solution 1:

Try this:

$(document).ready(function() {
var dataSet = [];
dataSet.push(
    [1,"Sasha","Brenna","0800 1111"],
    [2,"Sage","Mia","(01012) 405872"],
    [3,"Chelsea","Allistair","076 0578 0265"],
    [4,"Uta","Savannah","070 1247 5884"],
    [5,"Remedios","Berk","0995 181 0007"],
    [6,"Ruby","Wayne","0800 1111"],
    [7,"Faith","Fredericka","(01709) 099879"],
    [8,"Myra","Harrison","070 4241 9576"],
    [9,"Drake","Miriam","0800 733635"],
    [10,"Reed","Shannon","076 8597 5067"]
);

$('#data_table').DataTable( {
    data: dataSet,
});

In your case the dataSet get its values from ajax() call.

Working Fiddle

Solution 2:

You need to send proper dataset to datatable if you are using server side datatable. Below is a working example of server side datatable using asp.net

[WebMethod]
[System.Web.Script.Services.ScriptMethod(UseHttpGet = true)]
publicstatic DataTableData GetData()
{

   List<string[]> list = new List<string[]>();
   DataTableData data = new DataTableData();
   data.data = new List<string[]>();

   list.Add(newstring[] { "Mairaj", "Ahmad", "Minhas", "1" });
   list.Add(newstring[] { "Mairaj", "Ahmad", "Minhas", "2" });
   list.Add(newstring[] { "Mairaj", "Ahmad", "Minhas", "3" });
   list.Add(newstring[] { "Mairaj", "Ahmad", "Minhas", "4" });
   list.Add(newstring[] { "Mairaj", "Ahmad", "Minhas", "5" });
   list.Add(newstring[] { "Mairaj", "Ahmad", "Minhas", "6" });
   list.Add(newstring[] { "Mairaj", "Ahmad", "Minhas", "7" });
   list.Add(newstring[] { "Mairaj", "Ahmad", "Minhas", "8" });
   list.Add(newstring[] { "Mairaj", "Ahmad", "Minhas", "9" });
   list.Add(newstring[] { "Mairaj", "Ahmad", "Minhas", "10" });
   list.Add(newstring[] { "Mairaj", "Ahmad", "Minhas", "11" });
   list.Add(newstring[] { "Mairaj", "Ahmad", "Minhas", "12" });
   list.Add(newstring[] { "Mairaj", "Ahmad", "Minhas", "13" });
   list.Add(newstring[] { "Mairaj", "Ahmad", "Minhas", "14" });
   list.Add(newstring[] { "Mairaj", "Ahmad", "Minhas", "15" });
   list.Add(newstring[] { "Mairaj", "Ahmad", "Minhas", "16" });

   int start = 0;
   int length = 0;
   int draw = 0;
   int.TryParse(HttpContext.Current.Request.QueryString["start"].ToString(), out start);
   int.TryParse(HttpContext.Current.Request.QueryString["length"].ToString(), out length);
            int.TryParse(HttpContext.Current.Request.QueryString["draw"].ToString(), out draw);

   data.draw = draw;
   var filter = list.Skip(start).Take(length).ToList();
   data.data = filter;

   data.recordsFiltered = list.Count;
   data.recordsTotal = list.Count;
   return data;
}

publicclassDataTableData
{
  publicint draw { get; set; }
  publicint recordsTotal { get; set; }
  publicint recordsFiltered { get; set; }
  public List<string[]> data { get; set; }

 }

This is datatable definition

<tableid="example"class="display"cellspacing="0"width="100%"><thead><tr><th>First name</th><th>Last name</th><th>Position</th><th>ID</th></tr></thead><tfoot><tr><th>First name</th><th>Last name</th><th>Position</th><th>ID</th></tr></tfoot></table>

Solution 3:

I was able to output the table via using the ajax property of the Datatables. I simply followed the instructions here for the format of my particular JSON string.

The JSON string

[{"NickName":"Bob","LogIN":"6/7/1846 12:00:00 AM","LogOUT":"6/7/1846 12:00:00 AM"},{"NickName":"Bob","LogIN":"6/6/1846 12:00:00 AM","LogOUT":"6/6/1846 12:00:00 AM"},{"NickName":"Patrick","LogIN":"6/7/1846 12:00:00 AM","LogOUT":"6/7/1846 12:00:00 AM"},{"NickName":"Ward","LogIN":"6/7/1846 12:00:00 AM","LogOUT":"6/7/1846 12:00:00 AM"},{"NickName":"Ward","LogIN":"6/6/1846 12:00:00 AM","LogOUT":"6/6/1846 12:00:00 AM"},{"NickName":"Ward","LogIN":"6/5/1846 12:00:00 AM","LogOUT":"6/5/1846 12:00:00 AM"},{"NickName":"Krabs","LogIN":"","LogOUT":""},{"NickName":"Sandy","LogIN":"","LogOUT":""},{"NickName":"Pearl","LogIN":"","LogOUT":""}]

The HTML

<divclass="col-md-4"><h2>JQUERY Datagrid</h2><p>Free Datatables via Jquery. Data is produced via JSON data source. </p><div><tableid="datatableJSONEx"class="display"><thead><tr><th>NickName</th><th>LogIN</th><th>LogOUT</th></tr></thead><tfoot><tr><th>NickName</th><th>LogIN</th><th>LogOUT</th></tr></tfoot></table></div></div>

..and the JS

var tbl = $('#datatableJSONEx').DataTable({

           ajax: {
               dataSrc: "",
               url: "DefaultJSONResult?THEstr=produceJSON"
           },

           columns: [
               { data: 'NickName' },
               { data: 'LogIN' },
               { data: 'LogOUT' }
           ],
           order: [[0, 'desc']],
           select: true,
           responsive: true,
           buttons: true,
           length: 10
       });

        //we set an interval so that grid automatically reloads every afer 10 secs.setInterval(function () {
       tbl.ajax.reload( null, false ); // ( null, false) so user paging is not reset on reload
            }, 10000 ); //10 seconds!

(thanks to Mayank for prodding me in the right direction. I more or less have a clearer idea of how ajax works. I am also able to return values via JSON.ajax() success, but I ultimately settled for the code above since with it I can also make the webpage live via .ajax.reload())