Posts

Showing posts from May, 2018

jQuery datatables export to pdf

1 comment
Read more

jQuery datatables server-side processing using asp.net web services

Step 1 : Add a Web Service to your Demo project. Name it EmployeeService.asmx. Copy and paste the following code. using System; using System.Collections.Generic; using System.Configuration; using System.Data; using System.Data.SqlClient; using System.Web.Script.Serialization; using System.Web.Services; namespace Demo {     [WebService(Namespace = "http://tempuri.org/")]     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]     [System.ComponentModel.ToolboxItem(false)]     [System.Web.Script.Services.ScriptService]     public class EmployeeService : System.Web.Services.WebService     {         [WebMethod]         public void GetEmployees(int iDisplayLength, int iDisplayStart, int iSortCol_0,             string sSortDir_0, string sSearch)         {             int displayLeng...
Post a Comment
Read more

jQuery datatables server-side processing example asp.net

Step 1 : Add a WebForm to your Demo project.   Step 2 : Copy and paste the following HTML and jQuery code on the webform. Notice that we have set bServerSide option to true. This will tell the jQuery datatables plugin to use server-side processing. We also have set sAjaxSource to EmployeeDataHandler.ashx. This option tells the jQuery datatables plugin about the external source from where the data needs to be loaded.  <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <title></title>     <script src="jquery-1.11.2.js"></script>     <link rel="stylesheet" type="text/css"         href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />     <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js">     </script>     <script type="text/javascript">   ...
Post a Comment
Read more

asp.net generic handler return json

Here are the steps to create the asp.net generic handler Step 1 : Create new asp.net web application project. Name it Demo. Step 2 : Include a connection string in the web.config file to your database. <add name="DBCS"       connectionString="server=.;database=SampleDB;integrated security=SSPI"/> Step 3 : Add a class file to the project. Name it Employee.cs. Copy and paste the following code. namespace Demo {     public class Employee     {         public int Id { get; set; }         public string FirstName { get; set; }         public string LastName { get; set; }         public string Gender { get; set; }         public string JobTitle { get; set; }     } } Step 4 : Add a new Generic Handler. Name it EmployeeDataHandler.ashx. Copy and paste the following code. using System; using System.Collections.Generic; us...
Post a Comment
Read more

jQuery datatables stored procedure for paging sorting and searching

SQL Script to create the table and populate it with test data Create table tblEmployees (     ID int primary key identity,     FirstName nvarchar(50),     LastName nvarchar(50),     Gender nvarchar(20),     JobTitle nvarchar(20) ) Go Insert into tblEmployees values('Mark', 'Hastings','Male','Developer') Insert into tblEmployees values('Maria', 'Nicholas','Female','Developer') Insert into tblEmployees values('Robert', 'Stephenson','Male','Sr. Developer') Insert into tblEmployees values('Mary', 'Quant','Female','Sr. Developer') Insert into tblEmployees values('John', 'Stenson','Male','Sr. Developer') Insert into tblEmployees values('Gilbert', 'Sullivan','Male','Developer') Insert into tblEmployees values('Rob', 'Gerald','Male','Sr. Developer') Inser...
1 comment
Read more

jQuery datatable show hide columns

Include the following HTML just above the datatable markup <div style="padding: 5px; padding-left: 0px">     <b>Show/Hide Column : </b>     <a class="showHideColumn" data-columnindex="0">Id</a> -     <a class="showHideColumn" data-columnindex="1">First Name</a> -     <a class="showHideColumn" data-columnindex="2">Last Name</a> -     <a class="showHideColumn" data-columnindex="3">Gender</a> -     <a class="showHideColumn" data-columnindex="4">Job Title</a> -     <a class="showHideColumn" data-columnindex="5">Web Site</a> -     <a class="showHideColumn" data-columnindex="6">Salary</a> -     <a class="showHideColumn" data-columnindex="7">Hire Date</a> </div> Include the following style sect...
Post a Comment
Read more

jQuery datatables individual column search

The following are the changes required for the example we discussed in Part 106. 1. Store the reference of the jQuery datatable in a variable for later use. var datatableInstance = $('#datatable').DataTable() 2. Use DataTable() instead of dataTable() function. Otherwise you will get an error stating datatableInstance.columns is not a function, when you use columns() function on datatableInstance. var datatableInstance = $('#datatable').DataTable() What is the difference between dataTable() and DataTable() dataTable() is the old dataTables constructur where as DataTable() is the newer version. If you use the old dataTable() constructor, please use api() function to access the new API. var datatableInstance = $('#datatable').DataTable() datatableInstance.api().columns().every(function () { 3. To include the Web Site column in search, set searchable option of this column to true {     'data': 'WebSite',     'sortable': fals...
Post a Comment
Read more

jQuery datatables get data from database table

Step 1 : Create database table tblEmployee and the stored procedure Create table tblEmployees (     ID int primary key identity,     FirstName nvarchar(50),     LastName nvarchar(50),     Gender nvarchar(20),     JobTitle nvarchar(20),     WebSite nvarchar(100),     Salary int,     HireDate datetime ) Go Insert into tblEmployees values('Mark', 'Hastings','Male','Developer', 'http://pragimtech.com', 50000, '1/31/1978') Insert into tblEmployees values('Maria', 'Nicholas','Female','Developer', 'http://csharp-video-tutorials.blogspot.com', 50000, '12/22/1976') Insert into tblEmployees values('Robert', 'Stephenson','Male','Sr. Developer', NULL, 45000, '3/25/1980') Insert into tblEmployees values('Mary', 'Quant','Female','Sr. Developer', NULL, 65000, '5/27/1979') Insert into tblEmployees values(...
Post a Comment
Read more