-1

I have a Jsp page in which there is a table that is populated from the database. I want to Implement a search based on the fields on this table please tell me how to do this.

My Jsp page is given below

<html>
<jsp:include page="Headj.jsp"/>
<body>
    <script type="text/javascript">
        function deletedata(prdid) {
            var url = "Con_Product?action=delete&prdid=" + prdid;
            window.location = url;
        }

        function editdata(prdid) {
            var url = "Editprd.jsp?prdid=" + prdid + "&type=p&pg=prd";
            window.location = url;
        }
    </script>
    <div id="maindiv" class="container-fluid">
        <jsp:include page="Headerj.jsp"/>
        <div id="menu_content">
            <jsp:include page="Menuj.jsp"/>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <h1 class="page-header">Product</h1>
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active"><a href="#">Display</a></li>
                    <li><a href="Insertprd.jsp?pg=prd&type=m">Add New</a></li>
                    <!--<li><a href="#">Messages<a><li>-->
                </ul>
                <br>
                <div class="panel panel-default">
                    <div class="panel-body" style="padding: 3px;">
                        <strong style="font-size: 20px; font-family: sans-serif; color: #3b6282; margin-left: 10px;">Display Products</strong>
                        <form class="navbar-right form-inline">
                            <div class="form-group">
                                <select class="form-control">
                                    <option>Choose Option</option>
                                    <option>1</option>
                                    <option>2</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <div class="input-group">                                        
                                    <input type="text" class="form-control" placeholder="Search...">
                                </div>
                            </div>
                            <button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-search"></button>
                        </form>
                    </div>
                </div>            
                <div class="alert-success"><p>${param.message}</p></div>
                        <%
                            general gen = new general();
                            Op_Product opp = new Op_Product();
                            Op_Category opc = new Op_Category();
                            ResultSet rs = opp.getallproducts();
                        %>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped table-hover">
                        <thead>
                        <th><strong>Sl. No.</strong></th>
                        <th><strong>Product</strong></th>
                        <th><strong>Category</strong></th>
                        <th><strong>Sub-Category</strong></th>
                        <th><strong>Creator</strong></th>
                        <th><strong>Operations</strong></th>
                        </thead>
                        <%
                            int no = 1;
                            while (rs.next()) {
                        %>
                        <tr>
                            <td><%= no%></td>
                            <td><%= rs.getString("Prd_nme")%></td>
                            <td><%= opc.getOnecategoryname(rs.getString("Prd_catid"))%></td>
                            <td><%= opc.getOnesubcategoryname(rs.getString("Prd_scatid"))%></td>
                            <td><%= gen.getCreator(rs.getString("Prd_usr"))%></td>
                            <td>
                                <button type="button" class="btn btn-default btn-sm btn-danger" onclick="deletedata('<%= rs.getString("Prd_id")%>');">
                                    <span class="glyphicon glyphicon-trash"></span>
                                </button>
                                <button type="button" class="btn btn-default btn-sm btn-primary" onclick="editdata('<%= rs.getString("Prd_id")%>')">
                                    <span class="glyphicon glyphicon-edit"></span>
                                </button>
                                <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">
                                    <span class="glyphicon glyphicon-eye-open"></span>
                                </button>
                                <button class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal">
                                    <span class="glyphicon glyphicon-plus"></span>
                                </button> 
                            </td>
                        </tr>
                        <%
                                no++;
                            }
                        %>
                        <tfoot>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        </tfoot>
                    </table>
                </div>
            </div>                
        </div>
    </div>
    <div>
        <jsp:include page="Footerj.jsp"/>
    </div>
    <!-- Modal -->
    <div class="modal " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</body>

ScreenShot of my page is given below.

Screen shot of the page

The section the is circled is the search option the drop down list will have the field names and the search values will be entered in the text box.

Manesh
  • 586
  • 3
  • 14
  • 31
  • For searching jquery it is light weight and run at client side.. – user243405 Aug 20 '14 at 09:13
  • Wouldn't it actually be a search in your data and not only in the table's contents? In that case you might want to have a look at Solr (or plain Lucene). – Thomas Aug 20 '14 at 09:15
  • I would like to know the reason for the downward so that i can ask better questions or edit it properly. – Manesh Aug 21 '14 at 13:01

2 Answers2

4

To implement this you have 2 options:

The nice and slightly more complicated option

You can make an Ajax call using a JavaScript framework like jQuery to a servlet that will make the database query and respond to the ajax call via a Json object. This method will allow you to present the data without updating the page and the user experience will be better.

The easier option

You can submit that form to a servlet that makes the query and exposes the data as request attributes that are then presented in a jsp using jstl

Either way I recommend you to avoid scripting on the jsp files ( no <% %>) and instead use jstl and ${} to expose information. And do all the object creation and other login on servlets. That will make your code a lot easier and maintainable.

Adrian Lopez
  • 1,776
  • 1
  • 17
  • 35
  • what will you do for function calls in this case? – Manesh Aug 20 '14 at 11:41
  • they will be on the servlet class, the basic idea is to submit a form (post or get) contains fields of data that you want to qry DB based on, ex http:...../mypage.jsp?name=aaaaa&age=44 OR a POST request using html form and submit now you either handle this form data at JSP page, or on servlet using request.getParameter("name") and request.getParameter("age"), then pass them to a method, say getallproducts(name, age) another version of ur current method – Yazan Aug 20 '14 at 11:59
  • Exactly, usually on every request you have a servlet that performs the database access and any logic and then the already processed data is passed to the jsp for display using request attributes. Here you can find an example and a better explanation of how this is usually done http://www.journaldev.com/1877/java-servlet-tutorial-with-examples-for-beginners – Adrian Lopez Aug 20 '14 at 14:20
  • Here you can also find a really good explanation of why you shouldn't use Java scriptlets inside JSP: http://stackoverflow.com/questions/3177733/how-to-avoid-java-code-in-jsp-files – Adrian Lopez Aug 20 '14 at 14:27
0

I did this operation using Jquery, this way there is no page reload and since it is in the client side it will be more faster. A sample of what i have done is given in

http://jsfiddle.net/9hGym/35/

The JQuery code is given below

$("#search").keyup(function(){
    _this = this;
    // Show only matching TR, hide rest of them
    $.each($("#table tbody").find("tr"), function() {
        console.log($(this).text());
       var s = $("#sss").val(); if($(this).find('td').eq(s).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)
           $(this).hide();
        else
             $(this).show();                
    });
});
Manesh
  • 586
  • 3
  • 14
  • 31