I am trying to use the DataTable plugin to add functionality to my table but not getting.

Kamal zafar

I am trying to use the Data Table plugin to add functionality to my html table. I followed the steps for installation and initialization from datatables.net, but it is not adding any functionality to my html page. Any input would be useful. Thanks a lot!

This is My Index.Cshtml:-

@{
    ViewBag.Title = "Employee List";
}
  
<h2>Employee CRUD operation</h2>

<table id="AuctionTbl" class="table table-striped table-bordered">
    <tr>
        <th>Title</th>
        <th>Description</th>
        <th>ActualAmount</th>
        <th>StartingTime</th>
        <th>EndTime</th>
    </tr>
</table>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">

@section Scripts{
    <script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"> </script>
    <script>
        $(document.ready(function () {
            $('#AuctionTbl').DataTable({
                "ajax": {
                    "url": "/Auction/GetData",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "Title" },
                    { "data": "Description" },
                    { "data": "ActualAmount" },
                    { "data": "City" },
                    { "data": "EndTime" }
                ]
            });
        }));
    </script>
}

**This is My AuctionController:-
**

    public class AuctionController : Controller
    {
        // GET: Auction
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult GetData()
        {
            using (OurDbContext db = new OurDbContext())
            {
              List<Auction> auction = db.Auctions.ToList();
                return Json(new { data = auction }, JsonRequestBehavior.AllowGet);
            }
        }
    }

**This is My Auction.Cs File:-
**

    public class Auction
    {
        public int AuctionId { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
        public decimal ActualAmount { get; set; }
        public DateTime StartingTime { get; set; }
        public DateTime EndTime { get; set; }
        
    }

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

but it is not adding any functionality to my html page.

If the Datatables features aren't available the first place I would look is at the browser's console for errors. If that doesn't help then we would need to look at your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

One thing I noticed is you are loading dataTables.bootstrap4.min.js but you don't seem to be loading Bootstrap4. Not sure if that will cause issues. You can use the Download Builder to build the proper set of files for your environment.

Kevin

Kamal zafar

i don't know which file I need to download from Download Builder .
lots of option there
** styling framework:-**
datatable,bootstrap4,foundation,jqueryUi….
select package:-
jquery1,jquery3,bootstrap4,Datatable...…
Extensions:-
Button,Autofil,fixed column,Fixed Header,.....

after Download what I have to do.
please explain step by step procedure to solve this issue.
and I have already install Bootstrap 4.3.1 in my project.

colin

Hi @Kamal zafar ,

It would be worth reading the manual, pages such as the installation will help.

Cheers,

Colin

Kamal zafar

HI,
I Have checked everything on my side & looked fine.
I m using following versions :-
jquery-3.4.1
jQuery UI - v1.12.0
Bootstrap v4.2.1
System.Web.Mvc 5.2.3.0

Data Table functionality not working like searching, sorting and all the incredible functions are missing in my result.

kthorngren

As I mentioned before:

If the Datatables features aren't available the first place I would look is at the browser's console for errors. If that doesn't help then we would need to look at your page or a test case replicating the issue.

Do you see console log errors?

Do you see data in your table?

Kevin

Kamal zafar

Hi,
I have resolved my issue actually I don't need to add Document. Ready function in my script tag, when I removed this I have got all the data table functions.

thanks for your support buddy.

kthorngren

Now that you pointed that out I see the error. You should be getting something like this error in you browser:

Uncaught TypeError: document.ready is not a function

Line 22 in Index.Cshtml should look like this:

$(document).ready(function () {

Note the right parenthesis around `document.

And line 37 should look like this:

});

Note the removal of a right parenthesis.

Should look like this:

    <script>
        $(document).ready(function () {
            $('#AuctionTbl').DataTable({
                "ajax": {
                    "url": "/Auction/GetData",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "Title" },
                    { "data": "Description" },
                    { "data": "ActualAmount" },
                    { "data": "City" },
                    { "data": "EndTime" }
                ]
            });
        });
    </script>

Kevin