Question: jquery datatable with custom object parameter

Question

jquery datatable with custom object parameter

Answers 1
Added at 2016-12-26 15:12
Tags
Question

I am working with MVC and Jquery Data table. I just want pass my own parameter as class along with jquery datatable param. Here is the code I have used, but it is not working,

index.js

var options = {};
options.bProcessing = true;
options.bServerSide = true;
options.sAjaxSource = urlContent + 'Employee/GetAll';
options.bPaginate = true;
options.sPaginationType = "full_numbers";
options.iDisplayLength = 10;
options.bAutoWidth = true;
options.aoColumns = cols;
options.fnServerData = function (sSource, aoData, fnCallback) {
    $.ajax( {
        "dataType": 'json',
        "type": "GET",
        "url": sSource,
        "data": aoData,
        "success": function (data) {  },
        "failure": function (data) {  }
    } );
};

options.fnServerParams = function (aoData) {

    aoData.push({ "name": "employeeModel", "value": { Name : "testing", Age:25} });   
};

    var table = $('#' + tableId).DataTable(options);

And mu controller is,

 public JsonResult GetReportData(JQueryDataTableParamViewModel param, EmployeeViewModel employeeModel)
{
   return new List<Employee>();  //// Loads from Database
}

The employeeModel is always null. Where i did wrong. Please help me.

Answers to

jquery datatable with custom object parameter

nr: #1 dodano: 2016-12-26 15:12

I have not done it using the constructor which takes options as parameter, but i used to do it with other way, here is the code for that :

$('#assets-data-table').DataTable({
                    "serverSide": true,
                    "processing": true,
                    "ajax": {
                        "url": "@Url.Action("Get","Asset")",
                        "data": function (data) {

                            data.FacilitySite = $("#FacilitySite").val();
                            data.Building = $("#Building").val();
                            data.Manufacturer = $("#Manufacturer").val();
                            data.Status = $("#Status").val();
                        }
                    },
                    "columns": [
                        { "title": "Bar Code", "data": "BarCode", "searchable": true },
                        { "title": "Manufacturer", "data": "Manufacturer", "searchable": true },
                        { "title": "Model", "data": "ModelNumber", "searchable": true },
                        { "title": "Building", "data": "Building", "searchable": true },
                        { "title": "Room No", "data": "RoomNo" },
                        { "title": "Quantity", "data": "Quantity" },
                        {
                            "title": "Actions",
                            "data": "AssetID",
                            "searchable": false,
                            "sortable": false,
                            "render": function (data, type, full, meta) {
                                return '<a href="@Url.Action("Edit","Asset")?id=' + data + '" class="editAsset">Edit</a> | <a href="@Url.Action("Details","Asset")?id=' + data + '">Details</a> | <a href="@Url.Action("Delete","Asset")?id=' + data + '">Delete</a>';
                            }
                        }
                    ],
                    "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
                    initComplete: function () {
                        var input = $('.dataTables_filter input').unbind(),
                            self = this.api(),
                            $searchButton = $('<button>')
                                       .text('search')
                                       .addClass("btn btn-default")
                                       .css("margin-left", "10px")
                                       .click(function () {
                                           self.search(input.val()).draw();
                                       })

                        $('.dataTables_filter').append($searchButton);
                    },
                    "createdRow": function (row, data, index) {
                        if (data["Building"] == null)
                            return;
                        switch (data["Building"].toLowerCase()) {
                            case 'west':
                                $('td:not(:last-child)', row).css({
                                    'background': 'red',
                                    'color': 'white'
                                });
                                break;
                        }
                    }
                });

we are specifying custom paramets in the ajax call which is :

 "data": function (data) {

                            data.FacilitySite = $("#FacilitySite").val();
                            data.Building = $("#Building").val();
                            data.Manufacturer = $("#Manufacturer").val();
                            data.Status = $("#Status").val();
                        }

Action looks like:

 public ActionResult Get([ModelBinder(typeof(DataTablesBinder))] IDataTablesRequest requestModel, AdvancedSearchViewModel searchViewModel)
 {


 } 
Source Show
◀ Wstecz