documentation modified

Author: VladimirDimov

README.Mvc.md

@@ -1,5 +1,5 @@
 ## How to use
-Add the `[JQDataTable]` attribute to the ajax controller action. Return from the controller View with IQueryable collection of a strongly typed view model. This component uses IQueryable<T> interface to construct query expressions to your data collection which can be processed by an ORM like Entity Framework. On the client side configure the table for server side processing acccording to the jQuery Data Tables documentation https://datatables.net/examples/data_sources/server_side.html.
+Add the `[JQDataTable]` attribute to the controller action which provides the data. Return from the action `View` containing `IQueryable<>` collection of a strongly typed view model. On the client side configure the table for server side processing according to the jQuery Datatables documentation https://datatables.net/examples/data_sources/server_side.html.
 
 ### Example
 
@@ -23,24 +23,36 @@ Add the `[JQDataTable]` attribute to the ajax controller action. Return from the
         [JQDataTable]
         public ActionResult GetCustomersData()
         {
-            var data = this.context.Customers.Select(x => new CustomerViewModel
-            {
-                CustomerID = x.CustomerID,
-                AccountNumber = x.AccountNumber,
-                Person = new PersonViewModel
-                {
-                    FirstName = x.Person.FirstName,
-                    LastName = x.Person.LastName,
-                },
-                Store = new StoreViewModel
-                {
-                    Name = x.Store.Name,
-                }
-            });
+            IQueryable<Customer> data = this.context.Customers;
 
             return this.View(data);
         }
     }
+
+    public class Customer
+    {
+        public int CustomerId { get; set; }
+        public Person Person { get; set; }
+        public Store Store { get; set; }
+        ...
+        ...
+    }
+
+    public class Person
+    {
+        ...
+        public string FirstName { get; set; }
+        public string LastName { get; set; }
+        ...
+        ...
+    }
+
+    public class Store
+    {
+        ...
+        public string Name { get; set; }
+        ...
+    }
 ```
 
 #### Client
@@ -80,10 +92,10 @@ Add the `[JQDataTable]` attribute to the ajax controller action. Return from the
                 "searchPlaceholder": "Search..."
             },
            "columns": [
-               { "data": "CustomerID", "searchable": false },
-               { "data": "Person.FirstName", "searchable": true },
-               { "data": "Person.LastName", "searchable": true },
-               { "data": "Store.Name", "searchable": true },
+               { "data": "CustomerID" },
+               { "data": "Person.FirstName" },
+               { "data": "Person.LastName" },
+               { "data": "Store.Name" },
             ]
         });
 

README.WebAPI2.md

@@ -0,0 +1,92 @@
+## How to use
+Add the `[JQDataTable]` attribute to the controller action which provides the data. Return from the action View containing IQueryable collection of a strongly typed view model. On the client side configure the table for server side processing according to the jQuery Datatables documentation https://datatables.net/examples/data_sources/server_side.html.
+
+### Example
+
+#### Server
+```cs
+    public class CustomersController : Controller
+    {
+        private AdventureWorks context;
+
+        public CustomersController()
+        {
+            this.context = new Data.AdventureWorks();
+        }
+
+        // GET: Customer
+        public ActionResult Index()
+        {
+            return View();
+        }
+
+        [JQDataTable]
+        public ActionResult GetCustomersData()
+        {
+            var data = this.context.Customers.Select(x => new CustomerViewModel
+            {
+                CustomerID = x.CustomerID,
+                AccountNumber = x.AccountNumber,
+                Person = new PersonViewModel
+                {
+                    FirstName = x.Person.FirstName,
+                    LastName = x.Person.LastName,
+                },
+                Store = new StoreViewModel
+                {
+                    Name = x.Store.Name,
+                }
+            });
+
+            return this.View(data);
+        }
+    }
+```
+
+#### Client
+```html
+<table class="display" cellspacing="0" width="100%">
+    <thead>
+        <tr>
+            <th>Id</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Store Name</th>
+        </tr>
+    </thead>
+
+    <tfoot>
+        <tr>
+            <th>Id</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Store Name</th>
+        </tr>
+    </tfoot>
+</table>
+
+@section Scripts {
+    <script>
+
+        var table = $('table').DataTable({
+            "proccessing": true,
+            "serverSide": true,
+            "ajax": {
+                url: "@Url.Action("GetCustomersData", "Customers")",
+                type: 'POST'
+            },
+            "language": {
+                "search": "",
+                "searchPlaceholder": "Search..."
+            },
+           "columns": [
+               { "data": "CustomerID", "searchable": false },
+               { "data": "Person.FirstName", "searchable": true },
+               { "data": "Person.LastName", "searchable": true },
+               { "data": "Store.Name", "searchable": true },
+            ]
+        });
+
+    </script>
+}
+```