My datatable is not working. I am trying to use with gridview.

Jul 18 2020 2:17 PM

MY data table is not working, the search button and pagination is not applied for gridview table. Please anyone help me in this.

Code -

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dashboard.aspx.cs" Inherits="WebApplication1.dashboard" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server" style="background-color: gainsboro;">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/fav-icon.png" type="image/x-icon" />
<title>Review</title>
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="vendors/stroke-icon/style.css" rel="stylesheet">
<link href="vendors/flat-icon/flaticon.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="vendors/revolution/css/settings.css" rel="stylesheet">
<link href="vendors/revolution/css/layers.css" rel="stylesheet" />
<link href="vendors/revolution/css/navigation.css" rel="stylesheet">
<link href="vendors/animate-css/animate.css" rel="stylesheet">
<link href="vendors/magnify-popup/magnific-popup.css" rel="stylesheet">
<link href="vendors/owl-carousel/owl.carousel.min.css" rel="stylesheet">
<link href="vendors/bootstrap-datepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="vendors/bootstrap-selector/bootstrap-select.css" rel="stylesheet">
<link href="vendors/lightbox/simpleLightbox.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link href=" https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script defer src="script.js"></script>
<script>
$(function () {
$("#datepicker-13").datepicker();
});
</script>
<script>
$(function () {
$("#datepicker-14").datepicker();
});
</script>
<script>
$(document).ready(function () {
var table = $('#gvContact1').DataTable();
});
</script>
</head>
<body>
<form id="form2" runat="server">
<section class="main_slider_area main_s_banner">
<br />
<asp:Label ID="LblRepresentativeDetail" runat="server" Text="WELCOME"></asp:Label>
<div style="position: relative; width: inherit; height: inherit">
<asp:GridView ID="gvContact1" runat="server" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" Height="271px" GridLines="Vertical" AutoGenerateColumns="False" align="center" Width="1175px" >
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="ContactID" HeaderText ="ID" />
<asp:BoundField DataField="SupportRepresentative" HeaderText ="Representative Name" />
<asp:BoundField DataField="Activity" HeaderText ="Activity" />
<asp:BoundField DataField="Mission" HeaderText ="Mission" />
<asp:BoundField DataField="Country" HeaderText ="Country" />
<asp:BoundField DataField="City" HeaderText ="City" />
</Columns>
</asp:GridView>
<br />
</div>
<div >
<br />
</div>
</section>
<script src="js/bootstrap.min.js"></script>
<script src="vendors/bootstrap-selector/bootstrap-select.js"></script>
</form>
</body>
</html>

Answers (7)

Documentation on how to create a .NET scripting engine?

Automatic resource files translation