JQuery DataTables ServerSide в ASP MVC

Question

Я попробовал это, но мне все еще нужно починить мой контроллер, я думаю

Мне нужно получить данные из моей базы данных в таблицу данных

Это моя таблица и мой JS

   <table id="myTable" class="display nowrap" style="width:100%">
         <thead>
               <tr>
                   <th>Status</th>
                   <th>Date and Time</th>
                   <th>Comments</th>
                </tr>
          </thead>                                           
   </table>

my Js

    <!--Import jQuery before export.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>


<!--Data Table-->
<script type="text/javascript" src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src=" https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>

<!--Export table buttons-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>

<!--Export table button CSS-->

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">

<script type="text/javascript">
    $(document).ready(function () {
        $.noConflict();
        $('#myTable').DataTable({
            "ajax": {
                "url": "/Profile/Index/viewModel/EmployeeCollection/HistoryOfStatuses",
                "type": "POST",
                "datatype": "json"
            },
            "columns": [
                { "data": "CheckStatus", "name": "Status" },
                { "data": "CheckTime", "name": "Date and Time" }
            ],
            "serverSide": "true",
            "order": [0, "asc"],

            dom: 'Bfrtip',
            buttons: [
                'copy', 'pdf', 'csv', 'print', 'excel'
            ]
        });
    });

Мой контроллер выглядит следующим образомиспользовать.

   public class Employee : BaseEntity
{        
    public Employee()
    {
        this.HistoryOfStatuses = new List<Checkinout>();
        this.TodayCheckedStatus = new List<Checkinout>();
    }
    public string Name { get; set; }
    public string Department { get; set; }
    public string CardNumber { get; set; }
    public string Status { get; set; }
    public byte[] Picture { get; set; }
    public Checkinout ActualCheckinStatuse { get; set; }
    public List<Checkinout> HistoryOfStatuses { get; set; }
    public List<Checkinout> TodayCheckedStatus { get; set; }
    public int UserId { get; internal set; }

    public string UName { get; set; }
    public string UField { get; set; }

    public string UDeg { get; set; }
    //test
}

Мне нужно использовать таблицу данных для сортировки и загрузки данных в формате pdf и exel.

Answer 1

Вот как я могу это исправить. Мой контроллер

[HttpPost]
    public string GetData()
    {
        string sJSONResponse = "";
        List<string> data = new List<string>();
        using (var context = new RSAT.Api.Data.Proxy.ATT2018NOVUSContext())
        {
            var baseViewModel = (from userinfo in context.Userinfo
                                 join department in context.Dept on userinfo.Deptid equals department.Deptid
                                 select new
                                 {
                                     Id = userinfo.Userid,
                                     Name = userinfo.Name,
                                     Department = department.DeptName,
                                     CardNumber = userinfo.CardNum,
                                     Status = userinfo.UserFlag.ToString(),
                                     HistoryOfStatuses = (from checkinout in context.Checkinout
                                                          join status in context.Status on checkinout.CheckType equals status.Statusid
                                                          where checkinout.Userid == userinfo.Userid
                                                          orderby checkinout.CheckTime descending
                                                          select new Checkinout
                                                          {
                                                              CheckStatus = status.StatusText,
                                                              CheckTime = checkinout.CheckTime
                                                          }).ToList(),
                                 }).ToList();

            foreach (var i in baseViewModel)
            {
                foreach (var h in i.HistoryOfStatuses)
                {
                    var s = "[\"" + h.CheckStatus + "\"," + "\"" + h.CheckTime + "\"]";
                    data.Add(s);
                }
            }

            string dataRez = "[";
            foreach (var i in data)
            {
                dataRez += i + ",";
            }
            dataRez = dataRez.Remove(dataRez.Length - 1);
            dataRez = dataRez + "]";
            sJSONResponse = "{\"draw\": 1,\"recordsTotal\": 57,\"recordsFiltered\": 57,\"data\":" + dataRez + "}";
        }
        return sJSONResponse;
    }

И мой сценарий

   <!--Import jQuery before export.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>


<!--Data Table-->
<script type="text/javascript" src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src=" https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>

<!--Export table buttons-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>

<!--Export table button CSS-->

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">

<script type="text/javascript">
    $(document).ready(function () {
        $.noConflict();
        $('#myTable1').DataTable({
            "ajax": {
                "url": "/Profile/GetData",
                "type": "POST",
                "datatype": "application/json"
            },

            "serverSide": "true",
            "order": [0, "asc"],
            "processing": "true",


            dom: 'Bfrtip',
            buttons: [
                'copy', 'pdf', 'csv', 'print', 'excel'
            ]
        });
    });
</script>

Answer 2

Вы отображаете список состояний в datatable, но вы возвращаете сотрудника viewModel, я думаю, вам нужно проверить свой код и вернуть правильные данные.Как показано ниже код

return Json(new
        {
            draw = model.draw,
            recordsTotal = viewModel.HistoryOfStatuses.Count(),
            recordsFiltered = viewModel.HistoryOfStatuses.Count(),
            data = viewModel.HistoryOfStatuses 
        }, JsonRequestBehavior.AllowGet);

Вы можете проверить ссылку Пример реализации серверной обработки в C # MVC