Issue with data tables about the row and column

Question

Ok I am using the bootstrap grid but I want to use the more enhanced features of the data table functions. I am using json to pass the data back to the ajax get method. Also how does one apply filtering?

Also at this point I wont be able to access TempData because its not been set yet how do I overcome that.

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

And for my get method I am using the following

[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 });
}

But I am presented with the following error I am using asp.net core 3.1.

But Yet My Grid is called example

And its showing the dropdown for entries and the search but not applying them

I only want to Display 3 Columns for the grid Date User Action

Answer 1

Maybe you need to use columns in $("#example").DataTable().Here is a demo worked:

View(TestDataTable):

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

TestController:

[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 });
        }

result: