从数据库中检索数据并使用 jquery 将数据加载到表中

【问题标题】：retrieve data from the database and load the data into the table using jquery从数据库中检索数据并使用 jquery 将数据加载到表中
【发布时间】：2022-04-18 15:53:06
【问题描述】： 
              <!DOCTYPE html>
                  <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Material Design for Bootstrap</title>
        <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/mdb.min.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/jquery.dataTables.min.css">
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="js/popper.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/mdb.min.js"></script>
        <script type="text/javascript"
src="js/bootstrap-table.min.js"></script>


    </head>
    <body>
        <!--Main Navigation-->
        <header>

            <!--Navbar-->
            <nav class="navbar navbar-expand-lg navbar-dark indigo">

                <!-- Additional container -->
                <div class="container">

                    <!-- Navbar brand -->
                    <!--        <a class="navbar-brand" href="#">Navbar</a>-->

                    <!-- Collapse button -->
                    <button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#basicExampleNav"
                            aria-controls="basicExampleNav"
aria-expanded="false"
                            aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <!-- Collapsible content -->
                    <div class="collapse navbar-collapse"
id="basicExampleNav">

                        <!-- Links -->
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="#">Home
                                    <span class="sr-only">(current)</span>
                                </a>
                            </li>


                            <!-- Dropdown -->
                            <li class="nav-item dropdown">
                                <!--              <a class="nav-link
dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true"

aria-expanded="false">Dropdown</a>-->
                                <!--              <div
class="dropdown-menu dropdown-primary"
aria-labelledby="navbarDropdownMenuLink">
                                                <a
class="dropdown-item" href="#">Action</a>
                                                <a
class="dropdown-item" href="#">Another action</a>
                                                <a
class="dropdown-item" href="#">Something else here</a>
                                              </div>-->
                            </li>

                        </ul>
                        <!-- Links -->

                        <form class="form-inline my-2 my-lg-0 ml-auto">

                                <input class="form-control"
id="search" type="search" placeholder="Search" aria-label="search">
                                <button class="btn btn-outline-white
btn-" type="submit">Search</button>
                        </form>

                            </div>


                    </div>

                    <!-- Collapsible content -->

                </div>
                <!-- Additional container -->

            </nav>

            <h2 class='mb-3'>INDENT DETAILS</h2>

            <!--<div class="container">
                <div class="row">
                    <div class="col-md-2">EMPLOYEENAME</div>
                    <div class="col-md-2">INDENTNO</div>
                    <div class="col-md-2">INDENTSHORTDES</div>
                    <div class="col-md-2">INDENTDATE
                    </div>
            </div>

            </div>-->
            <div class="container">
                <table id ="table" data-toggle="table" class="tabletable-striped table-hover display" style="width:100%">
                    <thead>
                        <tr>
                            <th
data-field="EMPLOYEECODE"><span>EMPLOYEECODE</span></th>
                            <th
data-field="INDENTDATE"><span>INDENTDATE</span></th>
                            <th
data-field="INDENTNO"><span>INDENTNO</span></th>

                            <th
data-field="INDENTSHORTDES"><span>INDENTSHORTDES</span></th>
                            <th
data-field="REGISTEREDDATE"><span>REGISTEREDDATE</span></th>
                            <th
data-field="LINEITEMCODE"><span>LINEITEMCODE</span></th>
<!--                            <th>
                                <button type="button" class=
"btn-blue btn-primary btn-sm">View details</button>
                            </th>-->

                        </tr>
                    </thead>
                </table>
            </div>

            <!--/.Navbar-->

        </header>
        <!--Main Navigation-->

        <!--Main layout-->
        <main class="mt-5">

            <!--Main container-->
            <div class="container">

                <!--Grid row-->
                <div class="row">

                    <!--Grid column-->
                    <div class="col-md-7 mb-4">

                        <div class="view overlay z-depth-1-half">
                            <img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg"
                                 class="card-img-top" alt="">
                            <div class="mask rgba-white-light"></div>
                        </div>

                    </div>
                    <div class="col-md-5 mb-4">

                        <h2>INDENT DETAILS</h2>
                        <hr>
                        <p>To view indent details please go to search
option and give your <br>Employee ID and click to <b>VIEW INDENTS</b>
</p>
                        <!--<a href="https://mdbootstrap.com/"
class="btn btn-indigo">Get it now!</a>-->

                    </div>
                    <!--Grid column-->

                </div>
                <!--Grid row-->

                <!--Grid row-->
                <div class="row">

                    <!--Grid column-->
                    <div class="col-lg-4 col-md-12 mb-4">

                        <!--Card-->
                        <div class="card">

                            <!--Card image-->
                            <div class="view overlay">
                                <img
                                    src="images/image6.jpg"
class="card-img-top"
                                    alt="">
                                <a href="#">
                                    <div class="mask rgba-white-slight"></div>
                                </a>
                            </div>

                            <!--Card content-->


                        </div>
                        <!--/.Card-->

                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-lg-4 col-md-6 mb-4">

                        <!--Card-->
                        <div class="card">

                            <!--Card image-->
                            <div class="view overlay">
                                <img src=".jpg"
                                     class="card-img-top"
                                     alt="">
                                <a href="#">
                                    <div class="mask rgba-white-slight"></div>
                                </a>
                            </div>

                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="card">
                            <div class="view overlay">
                                <img src="" class="card-img-top"
                                     alt="">
                                <a href="#">
                                    <div class="mask rgba-white-slight"></div>
                                </a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer class="page-footer font-small indigo pt-4 mt-4">
            <div class="container text-center text-md-left">
                <div class="row">
                    <div class="col-md-6 mt-md-0 mt-3">
                        <p>Designed & Developed by DISM, ISRO
Headquarters, Antariksh Bhavan, New BEL Road Bangalore- 560094</p>

                    </div>
                    <hr class="clearfix w-100 d-md-none pb-3">
                </div>

            </div>
            <div class="footer-copyright text-center py-3">© 2018 Copyright:
                <a
href="https://mdbootstrap.com/bootstrap-tutorial/">MDBootstrap.com</a>
            </div>
        </footer>
        <button>click</button>
        <script type="text/javascript">
            $(document).ready(function () {


        $.ajax({
                    //url: 'http://localhost:8080/indentDetails/array.json',
                    url: 'coinsIndentsServlet?empid=TR10472',
                    type: 'GET',
                    dataType: 'json',
                    timeout: 2500,
                    "columns": [

                {"data": "EMPLOYEECODE"},
                {"data":"   INDENTDATE"},
                {"data":"   INDENTNO"},
                {"data":"   INDENTSHORTDES"},
                {"data":"   REGISTEREDDATE"},
                {"data":"   LINEITEMCODE"}

                    ],
                    success: function (result)
                    {

                        console.log('complete with success and
data:', result.indents);
                        $('#table').bootstrapTable('load', result.indents);
//                        $('#table tbody tr').each(function(){
//                            s=$('<span style=" left:10px;
right:30px; top:10px; bottom:10px">View details</span>');
//                            s.click(function(e){
//                                e.stopPropgation();
//                                alert('clicked');
//
//                            });
//                            $(this).append(s);
//                        });
                    }



            });


//            $('#table-anexo').DataTable({
//                "ajax":'coinsIndentsServlet'
//            });
        });

        </script>
    </body>
        </html>

我创建了一个应用程序，一旦员工将其employeeid 输入搜索字段，员工就可以在该应用程序中查看他的所有详细信息。 我已经厌倦了这个应用程序的 jquery 和 materialdesign bootstrap 我不知道是什么问题，请为此提出一个答案。 当客户想要查看他的详细信息时，他只需将employeeid 输入搜索占位符，他们就可以在表格中看到数据。 我在这里使用引导程序 - JQuery 我正在尝试使用employeeID从数据库中加载数据表，当我将employeeid自动提供给搜索占位符时，表应该加载特定的员工详细信息。

【问题讨论】：

  • 请发布问题的相关代码，而不是页面中的所有代码
  • 你能帮忙吗
  • 请通过显示所有相关代码（不仅是 HTML）更具体
  • @jyothikachapur 你在下面看到我的回答了吗？
  • 我在这里使用 servlet 我不使用 php 你能帮我吗

标签： jquery bootstrap-4


【解决方案1】：

这里是如何通过 AJAX 显示输入值的即时结果

HTML

 <form method='post'>
 <input type='text' id='search'>
 </form>
 <div id='mydiv'></div>

JS 使用 jQuery 3.4.1

 $(document).ready(function() { // Wait until document has loaded
 function load_data(query) { // Begin function to load data from query
 $.ajax({
 url:"myserverfile.php", // Link to PHP file
 method:"POST",
 data:{query:query},
 success:function(data){
 $('#mydiv').html(data); // Show data in div
 }
 });
 }
 $('#search').keyup(function() { // Await keyboard entry on input
 var search = $(this).val(); // Get value of input on keyboard entry
 load_data(search); // Load the data from value of input
 });
 });

PHP

 <?php
 if(isset($_POST["query"])) {
 require_once('db.php'); // Your SQL connection file 
 $query = mysqli_real_escape_string($con, $_POST["query"]); // Sanitize input
 $select = mysqli_query($con,"select * from table where id like '%".$query."%'"); // Selecting the primary id key from the table (or any unique value)
 if (mysqli_num_rows($select)> 0) { // If result
 $rows = mysqli_fetch_assoc($select);
 print_r($rows); // This prints an array, for nicer output create a while loop and specify indexes from the table.
 } else {
 echo "no data"; 
 }
 }
 ?>

在工作服务器上测试。

【讨论】：

  • 我这里不使用php，我使用servlet如何使用servlet加载数据
猜你喜欢
  • 2012-02-03
  • 1970-01-01
  • 1970-01-01
  • 2011-05-29
  • 1970-01-01
  • 1970-01-01
  • 2014-01-07
  • 2010-12-02
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode