A DataTable is a data structure used in programming to store and manipulate tabular data. It is commonly used in applications that require data to be organized in rows and columns, similar to a spreadsheet.
In the context of web development, DataTables is a popular jQuery plugin that enhances HTML tables by adding advanced features such as sorting, filtering, pagination, and more. With DataTables, you can easily display, search, and manipulate large datasets in a user- friendly manner.
To use DataTables, you need to include the jQuery library and the DataTables plugin in your HTML file. You can then initialize a DataTable on an existing HTML table by applying the necessary configuration options.
Here is an example of a DataTable definition using the DataTables plugin:
This code sets up a DataTable on the HTML table with the ID "myTable". The DataTables plugin is loaded from a CDN, and the necessary JavaScript code initializes the DataTable on document ready.
Once the DataTable is initialized, it will add sorting, filtering, and pagination controls to the table, allowing users to interact with the data easily.
Install the plugins listed below, then link them in the head tag.
https://drive.google.com/drive/folders/1LkpRe9eaAaRNH4RgFpVP2usbQXkfr0eh?usp=sharing
Creating an advanced data table using jQuery involves several steps, including integrating a popular jQuery plugin like DataTables. DataTables is a highly flexible tool that adds advanced interaction controls to any HTML table. Here’s a step-by-step guide to creating an advanced data table with features like pagination, searching, and sorting using jQuery and the DataTables plugin.
You can change the all Id.
HTML CODE:
<div id="grid_div">
<div>
<div class="col-12 row">
<div class="category-filter col-3">
<asp:DropDownList ID="ddlsubject" runat="server" CssClass="form-control">
<asp:ListItem>All Subject</asp:ListItem>
<asp:ListItem>Maths</asp:ListItem>
<asp:ListItem>English</asp:ListItem>
<asp:ListItem>Hindi</asp:ListItem>
<asp:ListItem>Physics</asp:ListItem>
<asp:ListItem>Biology</asp:ListItem>
<asp:ListItem>History</asp:ListItem>
</asp:DropDownList>
</div>
<div class="category-filter col-3">
<asp:DropDownList ID="ddlcity" runat="server" CssClass="form-control">
<asp:ListItem>All City</asp:ListItem>
<asp:ListItem>mumbai</asp:ListItem>
<asp:ListItem>panjab</asp:ListItem>
<asp:ListItem>Bihar</asp:ListItem>
<asp:ListItem>delhi</asp:ListItem>
<asp:ListItem>Banglore</asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
<asp:GridView ID="gridview_employee_details" runat="server" Width="100%">
</asp:GridView>
</div>
JQUERY CODE:
<script type="text/javascript">
$(document).ready(function () {
// DataTable
var table = $('#gridview_employee_details').DataTable({
orderCellsTop: true,
dom: 'Bfrtip',
buttons: [
{
extend: 'colvis'
}
]
});
// Apply the search
$('#gridview_employee_details thead').on('keyup', ".column_search", function () {
table
.column($(this).parent().index())
.search(this.value)
.draw();
});
//Filter code
/*------------------------------------*/
/* var table = $('#gridview_customer_complaints').DataTable();*/
$("#gridview_employee_details.dataTables_filter").append($("#ddlsubject"));
var categoryIndex = 3;
$("#gridview_employee_details th").each(function (i) {
if ($($(this)).html() == "Category") {
categoryIndex = i; return false;
}
});
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var selectedItem = $('#ddlsubject').val()
var category = data[categoryIndex];
if (selectedItem === "All Subject" || category.includes(selectedItem)) {
return true;
}
return false;
}
);
$("#ddlsubject").change(function (e) {
table.draw();
});
table.draw();
/*------------------------------------*/
/* var table1 = $('#gridview_customer_complaints').DataTable();*/
$("#gridview_employee_details.dataTables_filter").append($("#ddlcity"));
var categoryIndex1 = 2;
$("#gridview_employee_details th").each(function (i) {
if ($($(this)).html() == "Category") {
categoryIndex1 = i; return false;
}
});
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var selectedItem = $('#ddlcity').val()
var category = data[categoryIndex1];
if (selectedItem === "All City" || category.includes(selectedItem)) {
return true;
}
return false;
}
);
$("#ddlcity").change(function (e) {
table.draw();
});
table.draw();
});
</script>
---------------------------------------------------
C# CODE:
gridview_employee_details.HeaderRow.TableSection = TableRowSection.TableHeader;
gridview_employee_details.UseAccessibleHeader = true;
0 Comments