locked
JQuery - GetData RRS feed

  • Question

  • User1509050366 posted

    For whatever reason I'm not able to load data on datatable... I'm using https://datatables.net/

    Problem: When I load the page it never calls the method "GetEmployeeDetails" 

    @model IEnumerable<DatatablesAutoFill.Models.EmployeeDetail>
    
    @section scripts{
    
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
        <script language="JavaScript" type="text/javascript" src="~/Scripts/jquery-3.3.1.min.js"></script>
        <link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />
        <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
        <script src="~/Scripts/dataTables.cellEdit.js"></script>
        <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
        <script src="https://cdn.datatables.net/fixedheader/3.1.3/js/dataTables.fixedHeader.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
    
        <script type="text/javascript">
    
            $(document).ready(function () {
                debugger;
    
                var table = $("#empDeatils").DataTable({
                    "processing": true, // for show progress bar
                    "serverSide": false, // for process server side
                    "filter": true, // this is for disable filter (search box)
                    "paging": true,
                    "pageLength": 20,
                    "iDisplayLength": 20,
                    "ajax": {
                        "url": "/EmployeeDetails/GetEmployeeDetails",
                        "type": "GET",
                        "datatype": 'json',
                        "data": 'data'
                    },
                    "columnDefs":
                           [
                               {
                                   "targets": [0],
                                   "visible": true,
                                   "searchable": true,
                                   "width": "100px"
                               },
                               {
                                   "targets": [1],
                                   "visible": false,
                                   "searchable": false,
                                   "width": "100px"
                               },
                               {
                                   "targets": [2],
                                   "searchable": true,
                                   "orderable": true,
                                   "width": "100px"
                               },
                               {
                                   "targets": [3],
                                   "searchable": true,
                                   "orderable": true
                               },
                           ],
                    "columns": [
                                  { "data": "FirstName", "name": "FirstName" },
                                  { "data": "LastName", "name": "LastName" },
                                  { "data": "Department", "name": "Department" },
                                  { "data": "RowId", "name": "RowId" },
                    ],
                    "dom": '<"top">rt<"bottom"flp><"clear">',
                    initComplete: function () {
                        this.api().columns().every(function () {
                            var column = this;
                            var select = $('<select><option value=""></option></select>')
                                .appendTo($(column.footer()).empty())
                                .on('change', function () {
                                    var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                    );
                                    column
                                        .search(val ? '^' + val + '$' : '', true, false)
                                        .draw();
                                });
                            column.data().unique().sort().each(function (d, j) {
                                select.append('<option value="' + d + '">' + d + '</option>')
                            });
                        });
                    }
                });
    
                //table.MakeCellsEditable({
                //    "onUpdate": myCallbackFunction,
                //    "inputCss": 'my-input-class',
                //    "columns": [1],
                //    "inputTypes": [
    
                //        {
                //            "column": 1,
                //            "type": "list",
                //            "options": [
                //                  { "value": -1, "display": "-select-" },
                //                  { "value": "Yes", "display": "Yes" },
                //                  { "value": "No", "display": "No" }
                //            ]
                //        },
    
                //    ],
                //});
    
                //table.columns().every(function () {
                //    var that = this;
                //    $('input', this.header()).on('keyup change', function () {
                //        if (that.search() !== this.value) {
                //            that
                //                .search(this.value)
                //                .draw();
                //        }
                //    });
                //});
    
                var isvalidation = true;
                var meetingheader = [];
                var UpdatedRws = [];
                function myCallbackFunction(updatedCell, updatedRow, oldValue) {
    
    
                }
            });
        </script>
    }
    <body>
        <div class="container">
            <div class="display">
                <input type="hidden" id="mID" />
                <input type="button" value="Export to Excel" id="expToExcelbtn" class="btn btn-primary btn-success btn-xs" />
                <div style="height:5px"></div>
                <table id="schdule" class="table table-striped table-bordered dt-responsive wrap" cellspacing="0">
                    <thead>
                        <tr>
                            <th>FirstName</th>
                            <th>LastName</th>
                            <th>Department</th>
                            <th>RowId</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>FirstName</th>
                            <th>LastName</th>
                            <th>Department</th>
                            <th>RowId</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    
    </body>

    Controller code is simple

    private DTEmpModel db = new DTEmpModel();
    
            // GET: EmployeeDetails
            public ActionResult Index()
            {
                return View();
            }
    
            [HttpGet]
            public JsonResult GetEmployeeDetails()
            {
                var empDetails = db.EmployeeDetails.ToList();
                return Json(new { data = empDetails }, JsonRequestBehavior.AllowGet);
            }
    namespace DatatablesAutoFill.Models
    {
        using System;
        using System.Collections.Generic;
        using System.ComponentModel.DataAnnotations;
        using System.ComponentModel.DataAnnotations.Schema;
        using System.Data.Entity.Spatial;
    
        public partial class EmployeeDetail
        {
            [StringLength(50)]
            public string FirstName { get; set; }
    
            [StringLength(50)]
            public string LastName { get; set; }
    
            [StringLength(50)]
            public string Department { get; set; }
    
            [Key]
            public int RowId { get; set; }
        }
    }
    

    Thursday, November 8, 2018 1:08 AM

Answers

  • User283571144 posted

    Hi singhswat,

    As PatriceSc says, your datatable doesn't used the right jquery selector id "#schdule". So you will find it doesn't send the requrest to controller to get the data.

    Besides, I suggest you could also check you have used shared view in your current view.

    Since if you don't use shared view, MVC will not render the section scripts. These scripts will not run.

    More details, you could refer to below codes, it is working well on my side.

    @section scripts{
    
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
        <script language="JavaScript" type="text/javascript" src="~/Scripts/jquery-3.3.1.min.js"></script>
        <link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />
        <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
        <script src="~/Scripts/dataTables.cellEdit.js"></script>
        <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
        <script src="https://cdn.datatables.net/fixedheader/3.1.3/js/dataTables.fixedHeader.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
    
        <script type="text/javascript">
    
            $(document).ready(function () {
                debugger;
    
                var table = $("#empDeatils").DataTable({
                    "processing": true, // for show progress bar
                    "serverSide": false, // for process server side
                    "filter": true, // this is for disable filter (search box)
                    "paging": true,
                    "pageLength": 20,
                    "iDisplayLength": 20,
                    "ajax": {
                        "url": "/EmployeeDetails/GetEmployeeDetails",
                        "type": "GET",
                        "datatype": 'json',
                        "data": 'data'
                    },
                    "columnDefs":
                           [
                               {
                                   "targets": [0],
                                   "visible": true,
                                   "searchable": true,
                                   "width": "100px"
                               },
                               {
                                   "targets": [1],
                                   "visible": false,
                                   "searchable": false,
                                   "width": "100px"
                               },
                               {
                                   "targets": [2],
                                   "searchable": true,
                                   "orderable": true,
                                   "width": "100px"
                               },
                               {
                                   "targets": [3],
                                   "searchable": true,
                                   "orderable": true
                               },
                           ],
                    "columns": [
                                  { "data": "FirstName", "name": "FirstName" },
                                  { "data": "LastName", "name": "LastName" },
                                  { "data": "Department", "name": "Department" },
                                  { "data": "RowId", "name": "RowId" },
                    ],
                    "dom": '<"top">rt<"bottom"flp><"clear">',
                    initComplete: function () {
                        this.api().columns().every(function () {
                            var column = this;
                            var select = $('<select><option value=""></option></select>')
                                .appendTo($(column.footer()).empty())
                                .on('change', function () {
                                    var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                    );
                                    column
                                        .search(val ? '^' + val + '$' : '', true, false)
                                        .draw();
                                });
                            column.data().unique().sort().each(function (d, j) {
                                select.append('<option value="' + d + '">' + d + '</option>')
                            });
                        });
                    }
                });
    
                //table.MakeCellsEditable({
                //    "onUpdate": myCallbackFunction,
                //    "inputCss": 'my-input-class',
                //    "columns": [1],
                //    "inputTypes": [
    
                //        {
                //            "column": 1,
                //            "type": "list",
                //            "options": [
                //                  { "value": -1, "display": "-select-" },
                //                  { "value": "Yes", "display": "Yes" },
                //                  { "value": "No", "display": "No" }
                //            ]
                //        },
    
                //    ],
                //});
    
                //table.columns().every(function () {
                //    var that = this;
                //    $('input', this.header()).on('keyup change', function () {
                //        if (that.search() !== this.value) {
                //            that
                //                .search(this.value)
                //                .draw();
                //        }
                //    });
                //});
    
                var isvalidation = true;
                var meetingheader = [];
                var UpdatedRws = [];
                function myCallbackFunction(updatedCell, updatedRow, oldValue) {
    
    
                }
            });
        </script>
    }

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 15, 2018 7:42 AM

All replies

  • User753101303 posted

    Hi,

    #empDeatils is a typo ? The markup you show uses "#schdule" ?

    Generally speaking it's likely best to still use F12 Network, F12 Console and other tools to see what actually happens when your code runs rather than starting right away by reading your code.

    Thursday, November 8, 2018 5:31 PM
  • User2053451246 posted

    Another very obvious problem in your code is you are referencing the same css and script libraries multiple times.  The ones with .min. in the name are just minimized versions of the ones without .min. in the name.  Use one or the other, not both.

    Thursday, November 8, 2018 5:45 PM
  • User283571144 posted

    Hi singhswat,

    As PatriceSc says, your datatable doesn't used the right jquery selector id "#schdule". So you will find it doesn't send the requrest to controller to get the data.

    Besides, I suggest you could also check you have used shared view in your current view.

    Since if you don't use shared view, MVC will not render the section scripts. These scripts will not run.

    More details, you could refer to below codes, it is working well on my side.

    @section scripts{
    
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
        <script language="JavaScript" type="text/javascript" src="~/Scripts/jquery-3.3.1.min.js"></script>
        <link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />
        <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
        <script src="~/Scripts/dataTables.cellEdit.js"></script>
        <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
        <script src="https://cdn.datatables.net/fixedheader/3.1.3/js/dataTables.fixedHeader.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
    
        <script type="text/javascript">
    
            $(document).ready(function () {
                debugger;
    
                var table = $("#empDeatils").DataTable({
                    "processing": true, // for show progress bar
                    "serverSide": false, // for process server side
                    "filter": true, // this is for disable filter (search box)
                    "paging": true,
                    "pageLength": 20,
                    "iDisplayLength": 20,
                    "ajax": {
                        "url": "/EmployeeDetails/GetEmployeeDetails",
                        "type": "GET",
                        "datatype": 'json',
                        "data": 'data'
                    },
                    "columnDefs":
                           [
                               {
                                   "targets": [0],
                                   "visible": true,
                                   "searchable": true,
                                   "width": "100px"
                               },
                               {
                                   "targets": [1],
                                   "visible": false,
                                   "searchable": false,
                                   "width": "100px"
                               },
                               {
                                   "targets": [2],
                                   "searchable": true,
                                   "orderable": true,
                                   "width": "100px"
                               },
                               {
                                   "targets": [3],
                                   "searchable": true,
                                   "orderable": true
                               },
                           ],
                    "columns": [
                                  { "data": "FirstName", "name": "FirstName" },
                                  { "data": "LastName", "name": "LastName" },
                                  { "data": "Department", "name": "Department" },
                                  { "data": "RowId", "name": "RowId" },
                    ],
                    "dom": '<"top">rt<"bottom"flp><"clear">',
                    initComplete: function () {
                        this.api().columns().every(function () {
                            var column = this;
                            var select = $('<select><option value=""></option></select>')
                                .appendTo($(column.footer()).empty())
                                .on('change', function () {
                                    var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                    );
                                    column
                                        .search(val ? '^' + val + '$' : '', true, false)
                                        .draw();
                                });
                            column.data().unique().sort().each(function (d, j) {
                                select.append('<option value="' + d + '">' + d + '</option>')
                            });
                        });
                    }
                });
    
                //table.MakeCellsEditable({
                //    "onUpdate": myCallbackFunction,
                //    "inputCss": 'my-input-class',
                //    "columns": [1],
                //    "inputTypes": [
    
                //        {
                //            "column": 1,
                //            "type": "list",
                //            "options": [
                //                  { "value": -1, "display": "-select-" },
                //                  { "value": "Yes", "display": "Yes" },
                //                  { "value": "No", "display": "No" }
                //            ]
                //        },
    
                //    ],
                //});
    
                //table.columns().every(function () {
                //    var that = this;
                //    $('input', this.header()).on('keyup change', function () {
                //        if (that.search() !== this.value) {
                //            that
                //                .search(this.value)
                //                .draw();
                //        }
                //    });
                //});
    
                var isvalidation = true;
                var meetingheader = [];
                var UpdatedRws = [];
                function myCallbackFunction(updatedCell, updatedRow, oldValue) {
    
    
                }
            });
        </script>
    }

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 15, 2018 7:42 AM