Articles → JQUERY → Server-Side Processing With Ajax In Jquery

Server-Side Processing With Ajax In Jquery






Add Scripts To The Page




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



Create A HTML Table


<table id="gvObjects" class="display" style="width: 100%;">
   <thead>
      <tr>
        <th>Table Name</th>
      </tr>
   </thead>
   <tbody></tbody>
</table>



Create Datatablerequest, Datatableresponse, And Tableobject Classes


public class DataTableRequest
{
   public int draw { get; set; }
   public int start { get; set; }
   public int length { get; set; }
   public Search search { get; set; }

   public class Search
   {
       public string value { get; set; }
   }
}

// DataTable response class
public class DataTableResponse<T>
{
   public int draw { get; set; }
   public int recordsTotal { get; set; }
   public int recordsFiltered { get; set; }
   public List<T> data { get; set; }
}

// Table object class
public class TableObject
{
   public string name { get; set; }
}




Write A Method To Get Data


[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object GetObjects(int draw, int start, int length, string search)
{
    List<TableObject> allTables = new List<TableObject>();
    int totalRecords = 0;
    int filteredRecords = 0;
    string searchTerm = search;

    string connStr = @"your_connection_string";

    using (SqlConnection conn = new SqlConnection(connStr))
    {
        conn.Open();

        // Count total records
        using (SqlCommand countCmd = new SqlCommand("SELECT COUNT(*) FROM sys.objects WHERE type = 'U'", conn))
        {
            totalRecords = (int)countCmd.ExecuteScalar();
        }

        // Build dynamic WHERE clause for search
        string whereClause = "WHERE type = 'U'";
        if (!string.IsNullOrEmpty(searchTerm))
        {
            whereClause += " AND name LIKE @search";
        }

        // Count filtered records
        string countFilteredQuery = $"SELECT COUNT(*) FROM sys.objects {whereClause}";
        using (SqlCommand countFilteredCmd = new SqlCommand(countFilteredQuery, conn))
        {
            if (!string.IsNullOrEmpty(searchTerm))
                countFilteredCmd.Parameters.AddWithValue("@search", $"%{searchTerm}%");

            filteredRecords = (int)countFilteredCmd.ExecuteScalar();
        }

        // Paged and filtered data
        string dataQuery = $@"
                    SELECT name FROM (
                        SELECT name, ROW_NUMBER() OVER (ORDER BY name) AS RowNum
                        FROM sys.objects
                        {whereClause}
                    ) AS Temp
                    WHERE Temp.RowNum BETWEEN @start + 1 AND @start + @length";

        using (SqlCommand cmd = new SqlCommand(dataQuery, conn))
        {
            if (!string.IsNullOrEmpty(searchTerm))
                cmd.Parameters.AddWithValue("@search", $"%{searchTerm}%");

            cmd.Parameters.AddWithValue("@start", start);
            cmd.Parameters.AddWithValue("@length", length);

            using (SqlDataReader reader = cmd.ExecuteReader())
            {
                while (reader.Read())
                {
                    allTables.Add(new TableObject
                    {
                        name = reader["name"].ToString()
                    });
                }
            }
        }
    }

    // Return the data in a structure that DataTables expects
    return new
    {
        d = new DataTableResponse<TableObject>
        {
            draw = draw,
            recordsTotal = totalRecords,
            recordsFiltered = filteredRecords,
            data = allTables
        }
    };
}




Calling Getobjects From Ajax


<script type="text/javascript">
    $(document).ready(function () {
        $('#gvObjects').DataTable({
            "processing": true,
            "serverSide": true,
            "pageLength": 5,
            "ajax": {
                "url": "Default.aspx/GetObjects",
                "type": "POST",
                "contentType": "application/json; charset=utf-8",
                "dataType": "json",
                "data": function (d) {
                    console.log(d.search.value);
                    // Sending the DataTable request parameters as an object
                    var requestData = {
                        draw: d.draw,
                        start: d.start,
                        length: d.length,
                        search: d.search.value
                           
                    };
                    return JSON.stringify(requestData);
                },
                "dataSrc": function (json) {                      
                    json.draw = json.d.d.draw;
                    json.recordsTotal = json.d.d.recordsTotal;
                    json.recordsFiltered = json.d.d.recordsFiltered;
                    return json.d.d.data;
                }
            },
            "columns": [
                { "data": "name" }
            ]
        });
    });
</script>



Output


Picture showing the output of Server-Side Processing With Ajax In Jquery



Full Code


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="YourNamespace.Default" %>

<!DOCTYPE html>
<html>
<head>
    <title>DataTables POC</title>
    <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>
<body>

    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />

        <table id="gvObjects" class="display" style="width: 100%;">
            <thead>
                <tr>
                    <th>Table Name</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </form>

<script type="text/javascript">
    $(document).ready(function () {
        $('#gvObjects').DataTable({
            "processing": true,
            "serverSide": true,
            "pageLength": 5,
            "ajax": {
                "url": "Default.aspx/GetObjects",
                "type": "POST",
                "contentType": "application/json; charset=utf-8",
                "dataType": "json",
                "data": function (d) {
                    console.log(d.search.value);
                    // Sending the DataTable request parameters as an object
                    var requestData = {
                        draw: d.draw,
                        start: d.start,
                        length: d.length,
                        search: d.search.value
                           
                    };
                    return JSON.stringify(requestData);
                },
                "dataSrc": function (json) {                      
                    json.draw = json.d.d.draw;
                    json.recordsTotal = json.d.d.recordsTotal;
                    json.recordsFiltered = json.d.d.recordsFiltered;
                    return json.d.d.data;
                }
            },
            "columns": [
                { "data": "name" }
            ]
        });
    });
</script>
</body>
</html>


using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Web.Services;
using System.Web.Script.Services;

namespace YourNamespace
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }

        // WebMethod to handle DataTable requests
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        //public static object GetObjects(DataTableRequest request)
        public static object GetObjects(int draw, int start, int length, string search)            
        {
            List<TableObject> allTables = new List<TableObject>();
            int totalRecords = 0;
            int filteredRecords = 0;
            string searchTerm = search;

            string connStr = @"Data Source=your_connection_string";

            using (SqlConnection conn = new SqlConnection(connStr))
            {
                conn.Open();

                // Count total records
                using (SqlCommand countCmd = new SqlCommand("SELECT COUNT(*) FROM sys.objects WHERE type = 'U'", conn))
                {
                    totalRecords = (int)countCmd.ExecuteScalar();
                }

                // Build dynamic WHERE clause for search
                string whereClause = "WHERE type = 'U'";
                if (!string.IsNullOrEmpty(searchTerm))
                {
                    whereClause += " AND name LIKE @search";
                }

                // Count filtered records
                string countFilteredQuery = $"SELECT COUNT(*) FROM sys.objects {whereClause}";
                using (SqlCommand countFilteredCmd = new SqlCommand(countFilteredQuery, conn))
                {
                    if (!string.IsNullOrEmpty(searchTerm))
                        countFilteredCmd.Parameters.AddWithValue("@search", $"%{searchTerm}%");

                    filteredRecords = (int)countFilteredCmd.ExecuteScalar();
                }

                // Paged and filtered data
                string dataQuery = $@"
                    SELECT name FROM (
                        SELECT name, ROW_NUMBER() OVER (ORDER BY name) AS RowNum
                        FROM sys.objects
                        {whereClause}
                    ) AS Temp
                    WHERE Temp.RowNum BETWEEN @start + 1 AND @start + @length";

                using (SqlCommand cmd = new SqlCommand(dataQuery, conn))
                {
                    if (!string.IsNullOrEmpty(searchTerm))
                        cmd.Parameters.AddWithValue("@search", $"%{searchTerm}%");

                    cmd.Parameters.AddWithValue("@start", start);
                    cmd.Parameters.AddWithValue("@length", length);

                    using (SqlDataReader reader = cmd.ExecuteReader())
                    {
                        while (reader.Read())
                        {
                            allTables.Add(new TableObject
                            {
                                name = reader["name"].ToString()
                            });
                        }
                    }
                }
            }

            // Return the data in a structure that DataTables expects
            return new
            {
                d = new DataTableResponse<TableObject>
                {
                    draw = draw,
                    recordsTotal = totalRecords,
                    recordsFiltered = filteredRecords,
                    data = allTables
                }
            };
        }
    }

    // DataTable request class for parameters
    public class DataTableRequest
    {
        public int draw { get; set; }
        public int start { get; set; }
        public int length { get; set; }
        public Search search { get; set; }

        public class Search
        {
            public string value { get; set; }
            //public bool regex { get; set; }
        }
    }

    // DataTable response class
    public class DataTableResponse<T>
    {
        public int draw { get; set; }
        public int recordsTotal { get; set; }
        public int recordsFiltered { get; set; }
        public List<T> data { get; set; }
    }

    // Table object class
    public class TableObject
    {
        public string name { get; set; }
    }
}






Posted By  -  Karan Gupta
 
Posted On  -  Thursday, June 5, 2025

Query/Feedback


Your Email Id
 
Subject
 
Query/FeedbackCharacters remaining 250