jQuery DataTable - Paging, Custom Styling and Disable Sorting of a column

In my previous article jQuery Datatable using webservice, i explained the basic binding of jQuery Datatable with default sorting.
In this article I will explore below features of jQuery DataTable.
1. Paging.
2. Custom style on paging
3. Hide page numbers when number of rows is less than rows specified on a page
4. Specify width of a column
5. Disable sorting in a particular column.
Figure 1: Default Pagin


jQueryDataTableAllPaging

Figure 2: Paging is visible for one page.


jQueryDataTableOnlyOnePage

Figure 3: Paging is not visible when there is only one page


jQueryDataTableWithoutPaging

Let's see how we can achieve this:
Step 1: Download jQuery 1.4.2 and jQuery Datatable

Step 2: Add jquery-1.4.2.min.js and jquery.dataTables.min.js in the page



Step 3: Add the below style in the page.




Step 4: Add below html content inside body tag

By	Recipie Name	Preparation Time	Cooking Time
Loading....

Step 5: Add below javascript in the page. fnDrawCallback allows you to hide paging when number of rows is less than rows specified in one page.

Step 6: Create an asmx file and create below class. public class Recipie{ public string by; public string Recipiename; public string preparationtime; public string cookingtime; } Step 7: Add below name space in the asmx.cs file using System.Web.Script.Services; using System.Data; using System.Data.SqlClient; Step 8: Create below webmethod in the asmx.cs file to get data from database and return List to jQuery [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)] public List GetRecipie() { string strQuery = "SELECT * FROM Recipie"; DataTable dtRecipie = null; Recipie objRecipie; SqlConnection con = GetConnection("Data Source=(local);Initial Catalog=DataTable;Integrated Security=SSPI"); using(con) { con.Open(); using (SqlDataAdapter sqlAdapter = new SqlDataAdapter(strQuery, con)) { dtRecipie = new DataTable(); sqlAdapter.Fill(dtRecipie); } } List drlist = new List();
foreach (DataRow row in dtRecipie.Rows)
{
objRecipie = new Recipie();
objRecipie.by = row["by"].ToString();
objRecipie.Recipiename = row["Recipiename"].ToString();
objRecipie.preparationtime = row["preparationtime"].ToString();
objRecipie.cookingtime = row["cookingtime"].ToString();
drlist.Add(objRecipie);
}
return drlist;
}

Step 9 : Add below method to get SqlConnection
private SqlConnection GetConnection(string m_conString)
{
SqlConnection con = new SqlConnection(m_conString);
return con;
}

This ends the article of creating custom datatable using jquery and webservice.


Like us if you find this post useful. Thanks!
Download Code