Loading and displaying data in jQuery DataTables

In order to implement the jQuery DataTables plugin, you'll first need to create a new view that will list data inside an HTML table. For this example, you'll create a view that displays a list of customers. The list can be read from any data source, such as a SQL Server database. In this example, a simple List object will be used.

To accomplish this, complete the following steps:

  1. In Visual Studio, add a new controller class called CustomerController.cs to the Controllers folder.
  2. Add a new folder called Models to the root of your project and add a new class called Customer.cs to it.
  3. The Customer class will be used to retrieve a list of sample customer records. The code for the class is as follows:
            public class Customer 
        { 
            public string CustomerCode { get; set; } 
            public string CompanyName { get; set; } 
            public string ContactName { get; set; } 
            public string ContactTitle { get; set; } 
            public string Address { get; set; } 
            public string City { get; set; } 
            public DateTime CreatedDate { get; set; } 
        }
  4. Next, open the CustomerController class and add a new method called GetCustomers. For a complete listing of the GetCustomers method, please refer to this chapter's accompanying sample project. This method will simply return a list of sample customer data, as illustrated in the following code:
            public List<Customer> GetCustomers() 
        { 
            var customers = new List<Models.Customer> 
            { 
                new Models.Customer() {
                  CustomerCode = "ALFKI", 
                  CompanyName = "Alfreds Futterkiste", 
                  ContactName = "Maria Anderson", 
                  ContactTitle = "Sales Representative", 
                  Address = "Obere Str. 57", 
                  City = "Berlin", 
                  CreatedDate = new DateTime(2016,01,12) }, 
                new Models.Customer() {
                  CustomerCode = "AROUT", 
                  CompanyName = "Around the Horn", 
                  ContactName = "Thomas Hardy", 
                  ContactTitle = "Sales Representative", 
                  Address = "120 Hanover Sq.", 
                  City = "London", 
                  CreatedDate = new DateTime(2015,10,14)}, 
                new Models.Customer() { 
                   CustomerCode = "CHOPS", 
                   CompanyName = "Chop-suey Chinese", 
                   ContactName = "Yang Wang", 
                   ContactTitle = "Owner", 
                   Address = "Hauptstr. 29", 
                   City = "Bern", 
                   CreatedDate = new DateTime(2010,7,14)}, 
                new Models.Customer() { 
                   CustomerCode = "EASTC", 
                   CompanyName = "Eastern Connection", 
                   ContactName = "Ann Devon", 
                   ContactTitle = "Sales Agent", 
                   Address = "35 King George", 
                   City = "London", 
                   CreatedDate = new DateTime(2015,10,15)}, 
                ... 
            }; 
            return customers; 
        }
  5. In order to retrieve a list of customers and pass the data to the view, change the Index method on the CustomerController to the following:
    public IActionResult Index() 
{ 
    var model = GetCustomers(); 
    return View(model); 
}
  6. Next, create a new sub-folder called Customer inside the Views folder.
  7. Right-click on the newly created Customer folder and select Add | New Item... from the context menu.
  8. Select MVC View Page from the list of items, name the file Index.cshtml, and click on Add, as shown in the following screenshot:
    Loading and displaying data in jQuery DataTables
  9. Change the markup for the newly added view to the following:
            @model IEnumerable<Chapter8.Models.Customer> 
        @{ 
            Layout = "_Layout"; 
        } 
        <div class="container"> 
            <h1>Customer List</h1> 
            <div class="row"> 
                <table id="customer-table" 
                 class="table table-striped table-bordered"> 
                    <thead> 
                    <tr> 
                        <th>Code</th> 
                        <th>Company Name</th> 
                        <th>Contact Name</th> 
                        <th>Address</th> 
                        <th>City</th> 
                        <th>Created</th> 
                    </tr> 
                    </thead> 
                    <tbody> 
                    @foreach (var customer in Model) 
                    { 
                        <tr> 
                            <td>@customer.CustomerCode</td> 
                            <td>@customer.CompanyName</td> 
                            <td>@customer.ContactName</td> 
                            <td>@customer.Address</td> 
                            <td>@customer.City</td> 
                            <td>@customer.CreatedDate.ToString("d")</td> 
                        </tr> 
                    } 
                    </tbody> 
                </table> 
            </div> 
        </div>

In this markup, the table-striped, table-hover, and table-bordered styles have been added to the table whose id attribute has been set to customer-table. You'll also notice that the column header names have been wrapped inside a <thead> element and the table rows inside a <tbody> element.

The HTML markup for the view is now ready. Complete the following steps to enable the jQuery DataTable functionality for the table:

  1. Open the _Layout.cshtml file in the ViewsShared folder.
  2. Add references to the jQuery DataTables base and the Bootstrap style sheets by adding the following mark-up inside the <head> element:
          <link rel="stylesheet" type="text/css" href="~/css/bootstrap.css" /> 
      <link rel="stylesheet" type="text/css" href="//cdn.datatables.net    
       /1.10.11/css/dataTables.bootstrap4.min.css">
  3. Scroll to the bottom of the _Layout.cshtml file and add a reference to the jQuery as well as the Bootstrap JavaScript files:
            <script src="~/lib/jquery/dist/jquery.js"></script> 
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
  4. Also, make sure that you have a section declaration for a section called scripts at the bottom of the _Layout.cshtml file:
            @RenderSection("scripts", required: false)
  5. Open the Index.cshtml file in the ViewsCustomer folder. Add the following code to the bottom of the file:
            @section scripts{ 
            <script type="text/javascript" 
              src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js">
             </script> 
            <script type="text/javascript" 
              src="//cdn.datatables.net/1.10.11
                /js/dataTables.bootstrap4.min.js">
            </script> 
            <script type="text/javascript"> 
                $(document).ready(function () { 
                    $('#customer-table').DataTable(); 
                }); 
            </script> 
        }

In the preceding steps, you've added the required references to the DataTables style sheets as well as the JavaScript files. You also created a jQuery event handler, which will enable the DataTable functionality on all HTML elements with a class name of table as soon as the page loads.

When you run your project and navigate to the customers view, you'll see that the list of customers are automatically paginated into groups of ten and you are able to search and sort the data inside the table, as shown in the following screenshot. The default Bootstrap 4 styles for tables are also correctly applied:

Loading and displaying data in jQuery DataTables
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.226.170.187