I defined my Gridview as a jQuery Datatable plugin. Whenever page loads with huge records, Datatable loads twice
So I need to do server side processing to avoid this issue correct?
do you have sample code to bind data grid view datatable plugin on server side?
Attached my source codes.
Site.Master:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="searchsamplemodal.Site1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Demo page</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css" />
</head>
<body>
<div>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var table = $('[id*=GridView1]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
dom: 'Bfrtip',
dom: 'frtipB',
searching: false,
scrollX: true,
scrollCollapse: false,
autoWidth: true,
responsive: true,
'aoColumnDefs': [{ 'bSortable': false, 'aTargets': [0]}],
'iDisplayLength': 8,
buttons: [
{ extend: 'copy', text: 'Copy to clipboard', className: 'exportExcel', exportOptions: { modifier: { page: 'all'}} },
{ extend: 'excel', text: 'Export to Excel', className: 'exportExcel', filename: 'Agenda_Excel', exportOptions: { modifier: { page: 'all'}} },
{ extend: 'csv', text: 'Export to CSV', className: 'exportExcel', filename: 'Agenda_Csv', exportOptions: { modifier: { page: 'all'}} },
{ extend: 'pdf', text: 'Export to PDF', className: 'exportExcel', filename: 'Agenda_Pdf', orientation: 'landscape', pageSize: 'LEGAL', exportOptions: { modifier: { page: 'all' }, columns: ':visible'} }
]
});
});
</script>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
Employee.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Employee.aspx.cs" MasterPageFile="~/Site1.Master" Inherits="searchsamplemodal.Employee" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form id="no" method="post" runat="server">
<div class="container">
<br />
<br />
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="w3-table-all w3-hoverable"
HeaderStyle-BackColor="#FFCCCC" Width="100%" ClientIDMode="Static">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="checkAll" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="false">
<ItemTemplate>
<asp:Label ID="lblaid" runat="server" Text='<%#Eval("aid") %>'> </asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
HeaderText="Action Point">
<ItemTemplate>
<asp:Label ID="lblagenda" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
Text='<%#Eval("agenda_name") %>'>
</asp:Label>
</ItemTemplate>
<HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
HeaderText="Agenda No.">
<ItemTemplate>
<asp:Label ID="lblfid" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
Text='<%#Eval("a_id") %>'>
</asp:Label>
</ItemTemplate>
<ControlStyle Width="100px" />
<HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
Visible="false">
<ItemTemplate>
<asp:Label ID="lblghmail" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
Text='<%#Eval("gh_mail") %>'>
</asp:Label>
</ItemTemplate>
<HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
HeaderText="Group Name">
<ItemTemplate>
<asp:Label ID="lblgname" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
Text='<%#Eval("group_name") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
Visible="false">
<ItemTemplate>
<asp:Label ID="lblgid" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
Text='<%#Eval("gh_id") %>'>
</asp:Label>
</ItemTemplate>
<HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
HeaderText="Status">
<ItemTemplate>
<asp:Label ID="lblstatus" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
Text='<%#Eval("agenda_status") %>'>
</asp:Label>
</ItemTemplate>
<ControlStyle Width="100px" />
<HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
Visible="false">
<ItemTemplate>
<asp:Label ID="lblduedate" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
Text='<%#Eval("due_date") %>'>
</asp:Label>
</ItemTemplate>
<ControlStyle Width="100px" />
<HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
Visible="false">
<ItemTemplate>
<asp:Label ID="lblreminder" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
Text='<%#Eval("REMINDER_DATE") %>'>
</asp:Label>
</ItemTemplate>
<ControlStyle Width="100px" />
<HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
Visible="false">
<ItemTemplate>
<asp:Label ID="lblpo" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
Text='<%#Eval("A_PO") %>'>
</asp:Label>
</ItemTemplate>
<ControlStyle Width="100px" />
<HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
</asp:TemplateField>
<asp:BoundField DataField="mdate" HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px"
HeaderStyle-ForeColor="Black" HeaderText="Meeting Date" ItemStyle-Font-Bold="True"
ItemStyle-Font-Names="Arial" ItemStyle-Font-Size="12px" DataFormatString="{0:dd/MMM/yyyy}">
<ControlStyle Width="60px" />
<HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
<ItemStyle Font-Bold="True" Font-Names="Arial" Font-Size="12px" />
</asp:BoundField>
</Columns>
<HeaderStyle BackColor="#4dc3ff" />
<EmptyDataTemplate>
No Record Available
</EmptyDataTemplate>
</asp:GridView>
</div>
</form>
</body>
</html>
</asp:Content>
Employee.aspx.cs:
namespace searchsamplemodal
{
public partial class Employee : System.Web.UI.Page
{
ClsBusinessLayer objBAL = new ClsBusinessLayer();
protected void Page_Load(object sender, EventArgs e)
{
// rblist.SelectedIndex = 2;
if (!IsPostBack)
{
System.Data.DataTable dt = new System.Data.DataTable();
dt.Columns.AddRange(new System.Data.DataColumn[]
{
new DataColumn("aid", typeof(int)), new System.Data.DataColumn("agenda_name", typeof(string)),
new DataColumn("a_id",typeof(string)), new System.Data.DataColumn("gh_mail", typeof(string)),
new DataColumn("group_name", typeof(string)), new System.Data.DataColumn("gh_id", typeof(string)),
new DataColumn("agenda_status", typeof(string)), new System.Data.DataColumn("due_date", typeof(DateTime)),
new DataColumn("REMINDER_DATE", typeof(DateTime)), new System.Data.DataColumn("A_PO", typeof(string)),
new DataColumn("mdate", typeof(DateTime))
});
for(int i=1; i<4000; i++)
{
dt.Rows.Add(i, "Name 1", "1", "test1@test.com", "Group 1", "1", "Active", "05/09/2018", "05/09/2018", "1", "05/09/2018");
}
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
}
}