在 asp.net MVC 中使用多过滤器数据表

Posted 2023-05-07

【中文标题】在 asp.net MVC 中使用多过滤器数据表

【英文标题】：Using multi filter datatables in asp.net MVC

【发布时间】：2019-04-07 19:43:34

【问题描述】：

我正在尝试在 asp.net 的数据表中实现multiple filters，但是当我搜索一个值时，我的表没有更新。

我按照该网站的官方示例进行操作，但没有成功。这是我正在使用的源代码。

视图上的 JS

$('#students tfoot th').each( function () 
                var title = $(this).text();
                if (title !== "") 
                    $(this).html('<input type="text" class="form-control form-control-sm" style="width: 100%" placeholder="' + title + '" />');
                 else 
                    $(this).html('<div class="text-center">-</div>');
                
             );

            tabela.columns().every( function () 
                var that = this;    
                $( 'input', this.header() ).on( 'keydown', function (ev) 
                    if (ev.keyCode == 13)  //only on enter keypress (code 13)
                        that
                            .search( this.value )
                            .draw();
                    
                 );
             );

控制器上的操作

[HttpPost]
        public JsonResult Listar2()
        
            var search = Request.Form.GetValues("search[value]")?[0];

            var list = db.Students;

            if (!string.IsNullOrEmpty(search))
            
                list = list.Where(m => m.name.ToLower().Contains(search.ToLower()) || m.class.ToLower().Contains(search.ToLower()));
            

            var draw = Request.Form.GetValues("draw")?[0];
            var start = Request.Form.GetValues("start")?[0];
            var length = Request.Form.GetValues("length")?[0];

            var width = length != null ? Convert.ToInt32(length) : 0;
            var skip = start != null ? Convert.ToInt32(start) : 0;

            var totalRecords = list.Count();
            var resultFinal = list.Skip(skip).Take(width).ToList();

            return Json(new
            
                data = resultFinal,
                draw,
                recordsFiltered = totalRecords,
                recordsTotal = totalRecords
            );
        

【问题讨论】：

您检查浏览器控制台是否有任何错误？另外，可能有错字tablela.columns 而不是table.columns

@MohsinMehmood 是的，控制台没有错误。此外，每次输入搜索时，操作都会收到一个请求，但搜索不会发生，因为值变为空。

我没有看到在输入搜索文本时调用 api 方法的任何代码。您分享的多搜索演示网址只是对数据表列执行客户端搜索。

@MohsinMehmood 表格生成器源代码：gist.github.com/leomarcamargo/dc6032a5fc9c9fc9c6b528462dd539b9

@LeomardeSouza 为什么你的方法是Listar2 而你的ajax 请求方法是Listar？你确定你在服务器上调用了正确的方法吗？

【参考方案1】：

我不知道你想完成什么。官方示例使用 javascript 对已插入 HTML 的数据表进行排序。您应该首先加载所有条目，将它们传递给视图，然后这个脚本应该过滤这些条目

【讨论】：

我不知道你想完成什么官方示例使用JavaScript对已经插入HTML的数据表进行排序。您应该首先加载所有条目，将它们传递给视图，然后此脚本应该过滤这些条目。在上面的 cmets 中，您有一个将数据加载到视图中的示例链接。简单搜索有效，但这种类型的多重搜索无效。