locked
Tried to used jqury search with MVC5 pagelist RRS feed

  • Question

  • User1694748171 posted

    I used jquary search filter and its working only with first page. if I want to search for name from second page, the search button is not working and I need to click next page. so search text only working with same page only.
    this is my view

              <div class="footer">
                        Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount
    
                        @Html.PagedListPager(Model, page => Url.Action("Index", "AdminRole", new { page, sortOrder = ViewBag.sortOrder }))
                    </div>
                </div>
            </div>
            <!-- /#page-content-wrapper -->
     
      
        <!-- /#wrapper -->
    <!-- Bootstrap core JavaScript -->
          <script src="~/Scripts/jquery.min.js"></script>
        <script src="~/Scripts/bootstrap.bundle.js"></script>
     
    
        <!-- Menu Toggle Script -->
        <script>
            $("#menu-toggle").click(function (e) {
                e.preventDefault();
                $("#wrapper").toggleClass("toggled");
            });
        </script>
    
    </body>
    
    </html>
    
    <script>
        $(document).ready(function(){
            $("#myInput").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#myTable tr").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });
    </script>
    
    <style>
        #Active {
            border: 3px solid red;
        }
    </style>

    Monday, September 14, 2020 3:22 PM

Answers

  • User475983607 posted

    I will choose purely JavaScript/jQuery approach 

    If you want to go with the DataTable then read the reference documentation to learn how the API works.  Otherwise there are other HTML table APIs you can find with a basic Google search.  And yes, you'll need to read the documentation to learn how to use the APIs as well.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 14, 2020 4:31 PM

All replies

  • User475983607 posted

    I used jquary search filter and its working only with first page. if I want to search for name from second page, the search button is not working and I need to click next page. so search text only working with same page only.
    this is my view

    Correct, the JavaScript/jQuery app only search the content displayed on the current page.  The other pages do not exist in the browser window which is why you have to click to another page.   Possible solutions is dropping the JavaScript/jQuery app and using a standard full page request or dropping the current View design and moving to a JavaScript/jQuery based table library like the DataTable.

    Monday, September 14, 2020 3:36 PM
  • User1694748171 posted

    Thank you for your replay, but do you have so example ? 

    Monday, September 14, 2020 3:50 PM
  • User475983607 posted

    luay20032003

    Thank you for your replay, but do you have so example ? 

    The DataTable link above has filter/search code examples if you decide on a purely JavaScript/jQuery approach. 

    See the standard Getting Started tutorials for a filter/search code examples; https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/getting-started-with-ef-using-mvc/

    Step 3 has the code but you might want to go through the whole tutorial as it build as it goes along or download the complete version and read the code.

    https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/getting-started-with-ef-using-mvc/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application

    Monday, September 14, 2020 4:00 PM
  • User1694748171 posted

    I will choose purely JavaScript/jQuery approach 

    Monday, September 14, 2020 4:06 PM
  • User475983607 posted

    I will choose purely JavaScript/jQuery approach 

    If you want to go with the DataTable then read the reference documentation to learn how the API works.  Otherwise there are other HTML table APIs you can find with a basic Google search.  And yes, you'll need to read the documentation to learn how to use the APIs as well.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 14, 2020 4:31 PM
  • User1694748171 posted

    Thank you.

    Monday, September 14, 2020 4:47 PM