c# - Filter GridView with Javascript -
i have function in javascript makes filters in gridview. but, function makes filter column, ie needed "input" per column in gridview filter gridview. how can adapt function 1 "input" gridview columns? i've adapted function. originaly, gets values in "table" not in grdiview, situation don't see solution. i'm clear?
my function:
$(function () { $("#tabela input").keyup(function () { var index = $(this).parent().index(); var nth = "#gridview1 td:nth-child(" + (index + 1).tostring() + ")"; var valor = $(this).val().touppercase(); $("#gridview1 tbody tr").show(); $(nth).each(function () { if ($(this).text().touppercase().indexof(valor) < 0) { $(this).parent().hide(); } }); }); $("#tabela input").blur(function () { $(this).val(""); });
});
my gridview:
<asp:gridview id="gridview1" runat="server" autogeneratecolumns="false" gridlines="none" cssclass="table table-bordered table-striped"> <columns> <asp:boundfield datafield="idtickets" headertext="id" /> <asp:boundfield datafield="username" headertext="user" /> <asp:boundfield datafield="accessgroup" headertext="access group" /> <asp:boundfield datafield="folderaccess" headertext="folder access" /> <asp:boundfield datafield="requestdate" headertext="request date" dataformatstring="{0:d}" /> <asp:boundfield datafield="situationdesc" headertext="situation" /> <asp:boundfield datafield="approver" headertext="approver" /> <asp:boundfield datafield="approvaldate" headertext="approval date" dataformatstring="{0:d}" /> <asp:boundfield datafield="businessjustification" headertext="business justification" /> <asp:boundfield datafield="server" headertext="server name" /> <asp:boundfield datafield="userrequestor" headertext="user request" /> <asp:templatefield visible="false"> <itemtemplate> <asp:hiddenfield id="access" runat="server" value='<%# bind("access") %>' /> </itemtemplate> </asp:templatefield> </columns> </asp:gridview>
to filter 3 first columns, needed 3 inputs:
<table id="tabela"> <thead> <tr> <th> id </th> <th> user </th> <th> access group </th> </tr> <tr> <th> <input type="text" id="txtcoluna1" /> </th> <th> <input type="text" id="txtcoluna2" /> </th> <th> <input type="text" id="txtcoluna3" /> </th> </tr> </thead> </table>
if understand question correctly, looking this:
$(function(){ $('#tabela input').keyup(function(){ var val = $(this).val().touppercase(); $('#gridview1> tbody > tr').each(function(index , element){ if($(this).text().touppercase().indexof(val)<0) $(this).hide(); else $(this).show(); }); }); });
essentially, iterates through rows in grid looking matches, hiding/showing rows accordingly.
in markup provided inside tabela
, can have 1 text input instead of 3.
Comments
Post a Comment