jQuery DataTables loading columns and data via ajax

Question

Am following this link to make ajax calls to load Jquery Datatables Dynamically

http://datatables.net/forums/discussion/3442/x&page=1#Item_10.

Before i start trying i got stuck with my idea here.

So how do the DataTables send the properties like iDisplayLength,iDisplayStart,sEcho to make pagination and display records.

How do i handle this ?

Sample code from Link for quick reference

$.ajax( {
        "dataType": 'text',
        "type": "GET",
        "url": "dtJSON.txt",
        "success": function (dataStr) {
            var data = eval( '('+dataStr+')' );
          $('#example').dataTable({
                "aaSorting": [[0, "desc"]],
                "aaData": data.aaData,
                "aoColumns": data.aoColumns,
                "bScrollCollapse": true,
                "bFilter": false,
                "sPaginationType": "full_numbers",
                "bJQueryUI": true,
                "aoColumnDefs": data.aoColumnDefs
          });
        }
    } );

I can get the data and column details using ajax but how do i handle the parameters sent to controller in MVC ?

Some assistance would be much appreciated :)

Thanks

Answer 1

this will help you changing the dropdownlist and submit of button populate the data in data table.

Note : This line will help to pass other controls value in the form when you dealing with datatable.

 @using (@Html.BeginForm("action", "controllername", FormMethod.Post))
    {
        @Html.AntiForgeryToken()
        <div class="table-responsive">
        <div class="col-sm-12">
            <div class="row">
                <div class="col-md-3">
                    <label>Report type</label>
                </div>
                <div class="col-md-3">

                    @Html.DropDownList("ReportTypeEnum", new SelectList(Enum.GetValues(typeof(appname.Model.ReportTypeEnum))), new {@class = "form-control"})
                </div>
                <div class="col-md-3">
                    <button class="btn btn-primary col-sm-12">Submit</button>
                </div>
in datatable binding model in ajax call as below:


 [ "ajax": {   "url": '@Url.Action("action", "controller")',
                                    'type': 'GET',
                                    "data": function (d) { d.reportType = $('#ReportTypeEnum :selected').text(); } //JSON.stringify({ reportType: varReportTypeEnum })
                                }]

    this code will for controller
dropdown enum: code in model:
 public enum ReportTypeEnum
    {

        Yes,
        No,
        NoResponse          
    }
and below datatable ajax calling method 
     public JsonResult ajaxcallmethod([ModelBinder(typeof(DataTablesBinder))] IDataTablesRequest requestModel, string reportType)// string reportType
            {

                // below is we are taking dropdownchange value based on that we load the data into datatable.
                yourmodel model = new yourmodel ();
                if (reportType.ToLower() == ReportTypeEnum.Yes.ToString().ToLower())
                {
                    model.ReportTypeEnum = ReportTypeEnum.Yes;
                }
                else if (reportType.ToLower() == ReportTypeEnum.No.ToString().ToLower())
                {
                    model.ReportTypeEnum = ReportTypeEnum.No;
                }
                else if (reportType.ToLower() == ReportTypeEnum.NoResponse.ToString().ToLower())
                {
                    model.ReportTypeEnum = ReportTypeEnum.NoResponse;
                }

    data =// here model call 


                return Json(new DataTablesResponse((int)requestModel.Draw, data, transactionsListingResponse.PagerResource.ResultCount, transactionsListingResponse.PagerResource.ResultCount), JsonRequestBehavior.AllowGet);
            }

Answer 2

My recomendation is to render de table in the client with handlebars and after apply data tables:

You will need an empty table:

<table id="mytable">
  <thead>
      <tr>
          <th>Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
      </tr>
  </thead>
  <tbody id="table_data_container">
      <!-- Populated by JS -->
  </tbody>
</table>

An ajax request, don't do pagination in the server-side, datatables will handle it for you in the client-side this means that you don't have to send the current page to the server, you just return all the available rows, if the number of rows is really high try to force the user to filter like search by name, id or something else you can then send that filter in the ajax request.

$.ajax({
    type: method,
    url: url,
    async: async,
    data: parameters,
    dataType: dataType,
    success: function(json){
        var container = $('#table_data_container');
        //your response should be an object like { items : [item,item,item,...] }
        var template = '{{#each item}}<tr><td>{{this.col1}}</td><td>{{this.col1}}</td><td>{{this.col1}}</td></tr>{{/each}}' //visit http://handlebarsjs.com/ for info
        RenderJson(json,template,container); //this will generate thehtml for the rows and append it to the table
        $('#mytable').dataTable();
    },
    error: function(response){
        alert('Error!');
    }
});

And a rendering function:

function RenderJson(json,template,container) {
    var compiledTemplate = Handlebars.compile(template);
    var html = compiledTemplate(json);
    $(container).html(''); //remove previous content
    $(container).html(html); //set new content
}

Hope it helps ;)