【问题标题】:Jquery dataTables serverSide in ASP MVCASP MVC 中的 Jquery dataTables serverSide
【发布时间】:2019-04-24 00:14:18
【问题描述】:

我试过了,但我认为我仍然需要修复我的控制器

我需要将数据从我的数据库中获取到数据表中

这是我的桌子和我的 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>

我的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'
            ]
        });
    });

我的控制器看起来像这样在这个数据表中我需要使用 HistoryOfStatuses

     public IActionResult Index(int? Id)
    {
        using (var context = new RSAT.Api.Data.Proxy.ATT2018NOVUSContext())
        {
            var baseViewModel = base.GetLayoutViewModel();
            var viewModel = new HomeViewModel()
            {
                User = baseViewModel.User,
                RoleCollection = baseViewModel.RoleCollection,
                TableCollection = baseViewModel.TableCollection,
                //Olap = baseViewModel.Olap,
                //Localization = baseViewModel.Localization,
                EmployeeCollection = (from userinfo in context.Userinfo
                                      where userinfo.Userid == Id
                                      join department in context.Dept on userinfo.Deptid equals department.Deptid
                                      select new Employee()
                                      {
                                          Id = userinfo.Userid,
                                          Name = userinfo.Name,
                                          Picture = userinfo.Picture,
                                          Department = department.DeptName,
                                          CardNumber = userinfo.CardNum,
                                          Status = userinfo.UserFlag.ToString(),
                                          ActualCheckinStatuse = (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
                                                                  }).FirstOrDefault(),
                                          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(),

                                          TodayCheckedStatus = (from checkinout in context.Checkinout
                                                                join status in context.Status on checkinout.CheckType equals status.Statusid
                                                                where checkinout.Userid == userinfo.Userid
                                                                where checkinout.CheckTime.Date == DateTime.Today.Date
                                                                orderby checkinout.CheckTime descending
                                                                select new Checkinout
                                                                {
                                                                    CheckStatus = status.StatusText,
                                                                    CheckTime = checkinout.CheckTime
                                                                }).ToList()

                                      }).ToList()
            };
            return View(viewModel);
        }

这是我要使用的班级员工控制器。

   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中的数据进行排序和下载。

【问题讨论】:

  • 嗨..你确定要返回 View(viewModel) 吗? .. 不是 Jsonresult(viewModel) 吗?
  • 您的 AJAX URL 在这里似乎是错误的。也不需要返回视图模型的所有实例,因为数据表中只有 2 列。

标签: c# jquery .net sql-server asp.net-mvc


【解决方案1】:

您正在数据表中显示状态列表,但您正在返回员工viewModel,我认为您需要检查您的代码并返回正确的数据。就像下面的代码

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

您可以查看链接Sample implementation of serverside processing in C# MVC

【讨论】:

    【解决方案2】:

    这就是我修复它的方法我的控制器

    [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>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-11-23
      • 2012-08-19
      • 2015-01-04
      • 2019-02-02
      • 1970-01-01
      • 2017-12-10
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多