首页 > 解决方案 > 关于行和列的数据表问题

问题描述

好的,我正在使用引导网格,但我想使用数据表函数的更多增强功能。我正在使用 json 将数据传递回 ajax get 方法。另外如何应用过滤?

同样在这一点上,我将无法访问 TempData,因为它尚未设置,我该如何克服它。

<script> 
 $(document).ready(function () {
    $("#example").DataTable({
        "ajax": {
            url: "/MISObjects/GetAuditTrailData",
            type: "get",
            database: "json"
        },
        "processing": true, // for show progress bar
        "serverSide": true, // for process server side
        "filter": true, // this is for disable filter (search box)
        "orderMulti": false // for disable multiple column at once
    })
 });
</script>

对于我的 get 方法,我使用以下

[HttpGet]
public IActionResult  GetAuditTrailData() {
  Int32.TryParse(TempData.Peek("CaseId").ToString(), out int resultCaseId);
  TempData["CaseId"] = resultCaseId;
  var auditTrailsHistory = _context.MisAuditTrail.Where(w => w.isActive == true && w.isDeleted == false &&w.MISObjectId==resultCaseId).ToList();
  return Json(new { data = auditTrailsHistory });
}

但是我正在使用 asp.net core 3.1 时出现以下错误。

![在此处输入图像描述

但是,我的网格被称为示例 在此处输入图像描述

它显示条目和搜索的下拉列表,但不应用它们

在此处输入图像描述

我只想为网格日期用户操作显示 3 列

标签: c#twitter-bootstrapasp.net-core

解决方案


也许您需要 columns$("#example").DataTable().Here 中使用一个演示:

查看(测试数据表):

<div>
    <table id="dataList" class="table table-striped table-bordered" style="width:100%">
        <thead class="thead-dark">
            <tr class="table-info">
                <th>id</th>
                <th>name</th>
                <th>age</th>
                <th>phone</th>
                <th>email</th>
            </tr>
        </thead>
    </table>
</div>
@section scripts{
        $('#dataList').DataTable({
            ajax: {
                url: '/Test/Data',
                type: "get",
                database: "json"
            },
            "processing": true, // for show progress bar
            "serverSide": true, // for process server side
            "filter": true, // this is for disable filter (search box)
            "orderMulti": false, // for disable multiple column at once
            columns: [
                { data: 'id' },
                { data: 'name' },
                { data: 'age' },
                { data: 'phone' },
                { data: 'email' }
            ]
        })
    </script>
}

测试控制器:

[HttpGet]
        public ActionResult TestDataTable()
        {

            return View();
        }
        [HttpGet]
        public IActionResult Data()
        {
            List<TestDT> testDTs = new List<TestDT> { new TestDT {id=1, name = "TestDT1", age = 1, phone = "1", email = "TestDT1@.com" },
            new TestDT {id=2, name = "TestDT2", age = 2, phone = "2", email = "TestDT2@.com" }, new TestDT {id=3, name = "TestDT3", age = 3, phone = "3", email = "TestDT3@.com" } ,
            new TestDT {id=4, name = "TestDT4", age = 4, phone = "4", email = "TestDT4@.com" }, new TestDT {id=5, name = "TestDT5", age = 5, phone = "5", email = "TestDT5@.com" } ,
            new TestDT {id=6, name = "TestDT6", age = 6, phone = "6", email = "TestDT6@.com" },new TestDT {id=7, name = "TestDT7", age = 7, phone = "7", email = "TestDT7@.com" },};
            return Json(new { data = testDTs });
        }

结果: 在此处输入图像描述


推荐阅读