Jquery DataTable With Example

In my programming life, i went through many Grid like asp:GridView,telerik radGrid etc but when i see this Jquery Datatable i really liked a lot. In this article i will explain about Jquery DataTable With Simple example.

For more Information about Jquery DataTable you can reach to this link:- https://datatables.net/

To implement this DataTable we don't need to write much code as compared to other Grid like asp:Gridview and telerik radgrid.

First of all take a aspx page and include these changes in your page.

Before we start we need to include some js and css files which is as below in your head section,

    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
    <link href="Content/bootstrap.css" rel="stylesheet" />

Here i added the bootstarp.css from my Content Folder and in place of that you can use cdn also.

Now, After that Create a WebMethod and Write your code means Business logic where we can retrieve some data from database which is like this,

        [WebMethod]
        public static string GetAllPositions()
        {
            DataTable dt=jobs.GetAll();
            return Newtonsoft.Json.JsonConvert.SerializeObject(dt);
        }

Here you can use any service or any api to retrieve the data. The above method i wrote inside my .aspx.cs page.

After that goto your aspx page and in the body tag create a table like this,

   <table id="positionsTable" class="table table-responsive table-hover">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Company</th>
                    </tr>
                </thead>
            </table>

Here i used only two th as Title and Company because i want to display only 2 columns in my Grid. If someone need some more columns then they can add easily.

After that we need to add some jquery code and after that the grid will load and the code is like as below,

<script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "dtTest.aspx/GetAllPositions",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var jsdata = JSON.parse(data.d);
                    var datatableVariable = $('#positionsTable').DataTable({
                        data: jsdata,
                        "bProcessing": true,
                        columns: [
                            { 'data': 'Title' },
                            { 'data': 'Company' }
                        ]
                    });
                },
                error: function (data) {
                    alert("Error");
                }
            });

        });
    </script>

Here in the above code i am using ajax call to get all the data in my success function and after that i converted into json format and binded all the json data to DataTable and there also we need to bind the columns and after that my grid will show.

One more thing i want to mention here is that by using jquery.dataTables we can Search,Sort and Paging will work fine. But one more thing i want to highlight here is that by using jquery.dataTables we can perform each and every operation without PostBack to Server where as if we use asp:GridView or telrik:radgrid the compulsory postback will occur.