Я хочу спросить о jquery datatables. Я разработал веб-загрузку документов для каждого отдела в моем офисе. Каждый документ я кладу в панель, чтобы отделить все отделы. Проблема в том, что я не могу сделать функцию поиска в каждой панели названия отдела, используя его jquery datatables. Это мой код:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="FileDetails.aspx.vb" Inherits="MRISO_FileUpload.FileDetails" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>File Details</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="../Style/demo.css" />
<script type="text/javascript">
$(function () {
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
})
</script>
<script type="text/javascript">
$(document).ready(function () {
$('.dataTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "Todo"]]
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#gvFileDetails").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable();
$('#gvFileDetails').DataTable();
$('input[type=search]').on("keyup", function () {
var searchTerm = $(this).val();
$(".forHighlight").each(function () {
var searchPattern = new RegExp('(' + searchTerm + ')', 'ig');
$(this).html($(this).text().replace(searchPattern, "<span class = 'highlight'>" + searchTerm + "</span>"));
});
});
});
</script>
<style type="text/css">
body {
font-family: 'Segoe UI';
font-size: 10pt;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#menuOne">
<span class="glyphicon glyphicon-minus"></span>
IT Documents
</a>
</h4>
</div>
<div id="menuOne" class="panel-collapse collapse in">
<div class="panel-body">
<asp:ScriptManager ID="Script1" runat="server"></asp:ScriptManager>
<asp:GridView ID="gvFileDetails" AutoGenerateColumns="false" CssClass="table table-bordered" AllowPaging="true" PageSize="100" EmptyDataText="No File Uploaded" runat="server">
<Columns>
<asp:TemplateField HeaderText="No" ItemStyle-Width="50px">
<ItemTemplate>
<%#(gvFileDetails.PageSize * gvFileDetails.PageIndex) + gvFileDetails.Rows.Count + 1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="FileName" HeaderText="File Name" ItemStyle-CssClass="forHighlight" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="50%" />
<asp:BoundField DataField="FileDate" HeaderText="Create Date" />
<asp:BoundField DataField="FileExt" HeaderText="Ext File" />
</Columns>
</asp:GridView>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#menuTwo">
<span class="glyphicon glyphicon-plus"></span>
Accounting Documents
</a>
</h4>
</div>
<div id="menuTwo" class="panel-collapse collapse">
<div class="panel-body">
<asp:GridView ID="gvFileAcc" AutoGenerateColumns="false" CssClass="table table-bordered" AllowPaging="true" PageSize="100" EmptyDataText="No File Uploaded" runat="server">
<Columns>
<asp:TemplateField HeaderText="No" ItemStyle-Width="50px">
<ItemTemplate>
<%#(gvFileAcc.PageSize * gvFileAcc.PageIndex) + gvFileAcc.Rows.Count + 1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="FileName" HeaderText="File Name" ItemStyle-CssClass="forHighlight" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="50%" />
<asp:BoundField DataField="FileDate" HeaderText="Create Date" />
<asp:BoundField DataField="FileExt" HeaderText="Ext File" />
</Columns>
</asp:GridView>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#menuThree">
<span class="glyphicon glyphicon-plus"></span>
Engineering Process Documents
</a>
</h4>
</div>
<div id="menuThree" class="panel-collapse collapse">
<div class="panel-body">
<asp:GridView ID="gvFileEng" AutoGenerateColumns="false" CssClass="table table-bordered" AllowPaging="true" PageSize="100" EmptyDataText="No File Uploaded" runat="server">
<Columns>
<asp:TemplateField HeaderText="No" ItemStyle-Width="50px">
<ItemTemplate>
<%#(gvFileEng.PageSize * gvFileEng.PageIndex) + gvFileEng.Rows.Count + 1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="FileName" HeaderText="File Name" ItemStyle-CssClass="forHighlight" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="50%" />
<asp:BoundField DataField="FileDate" HeaderText="Create Date" />
<asp:BoundField DataField="FileExt" HeaderText="Ext File" />
</Columns>
</asp:GridView>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#menuFour">
<span class="glyphicon glyphicon-plus"></span>
Finance Documents
</a>
</h4>
</div>
<div id="menuFour" class="panel-collapse collapse">
<div class="panel-body">
<asp:GridView ID="gvFileFin" AutoGenerateColumns="false" CssClass="table table-bordered" AllowPaging="true" PageSize="100" EmptyDataText="No File Uploaded" runat="server">
<Columns>
<asp:TemplateField HeaderText="No" ItemStyle-Width="50px">
<ItemTemplate>
<%#(gvFileFin.PageSize * gvFileFin.PageIndex) + gvFileFin.Rows.Count + 1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="FileName" HeaderText="File Name" ItemStyle-CssClass="forHighlight" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="50%" />
<asp:BoundField DataField="FileDate" HeaderText="Create Date" />
<asp:BoundField DataField="FileExt" HeaderText="Ext File" />
</Columns>
</asp:GridView>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#menuFive">
<span class="glyphicon glyphicon-plus"></span>
QHSE Documents
</a>
</h4>
</div>
<div id="menuFive" class="panel-collapse collapse">
<div class="panel-body">
<asp:GridView ID="gvFileQHSE" AutoGenerateColumns="false" CssClass="table table-bordered" AllowPaging="true" PageSize="100" EmptyDataText="No File Uploaded" runat="server">
<Columns>
<asp:TemplateField HeaderText="No" ItemStyle-Width="50px">
<ItemTemplate>
<%#(gvFileQHSE.PageSize * gvFileQHSE.PageIndex) + gvFileQHSE.Rows.Count + 1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="FileName" HeaderText="File Name" ItemStyle-CssClass="forHighlight" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="50%" />
<asp:BoundField DataField="FileDate" HeaderText="Create Date" />
<asp:BoundField DataField="FileExt" HeaderText="Ext File" />
</Columns>
</asp:GridView>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Выше приведен мой код с jQuery Datatables. Пожалуйста, помогите мне, как сделать функцию поиска в каждой панели в Dept.Name. Вот выглядит.
Спасибо:)
Эта первая панель с функцией поиска
Эта вторая и конечная панели не могут отображать функцию «Поиск»