Update Table with filter using jquery

Question

Update Table with filter using jquery

Asked 7 years, 10 months ago

Viewed 1,495 times

0

Good morning I’m looking for solutions to a demand but only found in php. I’m new in Jquery, Ajax... I want to put the filter of my table to be dynamic as the user is typing will appear the data, I searched a function calling for autocomplete, but I couldn’t implement.

My Table.

 <table cellpadding="1" border="0" id="minhaTabela" class="table table-condensed" cellspacing="0" width="100%" >
   <thead class="fixedHeader">
     <tr bgcolor="${cortop}">
       <th width="20">&nbsp;</th>
       <th width="70">Prontu&aacute;rio</th>
       <th width="269"><b>pacientes</b></th>
       <th width="181"><b>Plano</b></th>
     </tr>
   </thead>
   <c:forEach var="item" items="${pacientes}">
     <tr bgcolor="#F4F4F4" title="${item.titlo}">
       <td >
         <input type="radio" name="radio" id="radio" value="radio" onclick="selecionar('${item.cargo}', ${item.id}, '${item.plano}', ${item.idPlano}, '<%=request.getParameter("tipo")%>')" ondblclick="selecionar2('${item.cargo}', ${item.id}, '${item.plano}', ${item.idPlano}, '<%=request.getParameter("tipo")%>')" />
       </td>
       <td>${item.id}</td>
       <td nowrap="nowrap">${item.nome}&nbsp;&nbsp;&nbsp;</td>
       <td nowrap="nowrap">${item.plano}</td>
     </tr>
   </c:forEach></table>

Through this filter I’m pulling the BD data

<label  id="lbl" style="background: ${cortop}; color: ${corletra}" class="label label-info" >Nome:</label>
<input name="jtpaciente" type="text" class="form-control" id="jtpaciente"  value="<%=request.getAttribute("paci")%>" size="74" />

When the user type and press enter then a Ubmit of the page is made bringing only the name filtered.Would have a solution to add this jquery or ajax in this table em jsp ??

Have you tried with jQuery Datatables ? https://www.datatables.net plugin/

– Maurivan

2017/02/21 at 14:38
already yes, and it worked normally, but this plugin does everything automatically including adds a Field already called Search above the table.... but in my case I would like to add in the jtpaciente input .

– Arthur Edson

2017/02/21 at 14:41

1 answer

Browser other questions tagged jquery ajax jsp self-cmplete

You are not signed in. Login or sign up in order to post.

by Arthur Edson • **157** points · Answer 1 · 2017-02-22T18:21:00+00:00

I found this solution https://stackoverflow.com/questions/9127498/how-to-perform-a-real-time-search-and-filter-on-a-html-table

<script type="text/javascript">

                                            var $rows = $('#minhaTabela tr');
                                            $('#jtpaciente').keyup(function() {

                                                var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
                                                    reg = RegExp(val, 'i'),
                                                    text;

                                                $rows.show().filter(function() {
                                                    text = $(this).text().replace(/\s+/g, ' ');
                                                    return !reg.test(text);
                                                }).hide();
                                            });

                                        </script>