dtn36013 2019-03-25 18:00
浏览 71

我正在尝试将AJAX应用到我的tbody而不是所有的表

  1. I'm trying to apply Ajax to my tbody only not all my table but I can't do this. The AJAX working good if I put my complete table in page. I want to split my table header & tbody to be in separated page. The following code is AJAX:

    function jsQueryData() {
    var objData = {
        action: actionSplit0 + '/QueryData',
    };
    
    $.post(
        index_File,
        objData,
        function(data, status) {
            $('#table-container').html(data)
        },
        'html'
    )
    

    }

  2. This is the code of my table. If I put the table code completely in one page the AJAX working good:

        <table class="table table-striped table-bordered table-hover 
           main-table-h">
          <thead>
            <tr>
              <td scope="col" class="search-th">
                <input type="text" name="" value=""> <!-- for search -->
              </td>
            </tr>
            <tr>
              <th scope="col" class="align-top">item no</th>
            </tr>
          </thead>
          <tbody>
            <?php foreach ($allData1 as $data): ?>
              <tr>
                <td><?=$data->{2}; ?></td>
              </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
    
  3. I have tried to split the above code to be tbody in separate page but the data didn't come as a table but all tds come together.

  • 写回答

2条回答 默认 最新

  • drcvvkx914772 2019-03-25 18:41
    关注

    You will need to return ajax results as json. I did not see your table and database structure so let me create a table as follows and insert values into it for purpose of testing

    CREATE TABLE `users` (
      `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
      `username` varchar(100) NOT NULL,
      `name` varchar(100) NOT NULL,
      `email` varchar(100) NOT NULL,
      `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
    

    Insert Statetments for testing

    INSERT INTO `users` (`id`, `username`, `name`, `email`, `timestamp`) VALUES
    (1, 'nancy1', 'Nancy moore  ', 'nancyfake@gmail.com', '2018-11-16 05:02:35'),
    (2, 'tony1', 'tony moore    ', 'tonyfake@gmail.com', '2018-11-16 05:08:23');
    

    Here is a Re-write of your index.php reflecting ajax/jquery codes

    <!doctype html>
    <html>
        <head>
            <title></title>
    
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            url: 'result.php',
            type: 'get',
            dataType: 'JSON',
            success: function(response){
                var len = response.length;
                for(var i=0; i<len; i++){
                    var id = response[i].id;
                    var username = response[i].username;
                    var name = response[i].name;
                    var email = response[i].email;
    
                    var tr_str = "<tr>" +
                        "<td align='center'>" + (i+1) + "</td>" +
                        "<td align='center'>" + username + "</td>" +
                        "<td align='center'>" + name + "</td>" +
                        "<td align='center'>" + email + "</td>" +
                        "</tr>";
    
                    $("#userTable tbody").append(tr_str);
                }
    
            }
        });
    });
    </script>
    
        </head>
        <body>
            <div class="container">
                <table id="userTable" border="1" >
                    <thead>
                        <tr>
                            <th width="5%">S.no</th>
                            <th width="20%">Username</th>
                            <th width="20%">Name</th>
                            <th width="30%">Email</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </body>
    </html>
    

    config.php

    Remember to edit database credentials to suit yours

    <?php
    
    $host = "localhost"; /* Host name */
    $user = "root"; /* User */
    $password = ""; /* Password */
    $dbname = "your-db-name here"; /* Database name */
    
    $con = mysqli_connect($host, $user, $password,$dbname);
    // Check connection
    if (!$con) {
     die("Connection failed: " . mysqli_connect_error());
    }
    

    result.php

    <?php
    
    include "config.php";
    
    $return_arr = array();
    
    $query = "SELECT * FROM users ORDER BY NAME";
    
    $result = mysqli_query($con,$query);
    
    while($row = mysqli_fetch_array($result)){
        $id = $row['id'];
        $username = $row['username'];
        $name = $row['name'];
        $email = $row['email'];
    
        $return_arr[] = array("id" => $id,
                        "username" => $username,
                        "name" => $name,
                        "email" => $email);
    }
    
    // Encoding array in JSON format
    echo json_encode($return_arr);
    

    Thats all. Let me know how it goes

    评论

报告相同问题?

悬赏问题

  • ¥15 写一个方法checkPerson,入参实体类Person,出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题,上传的坐标文件里是怎么对无序点进行编号的,以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图
  • ¥15 关于大棚监测的pcb板设计
  • ¥15 stm32开发clion时遇到的编译问题
  • ¥15 lna设计 源简并电感型共源放大器
  • ¥15 如何用Labview在myRIO上做LCD显示?(语言-开发语言)
  • ¥15 Vue3地图和异步函数使用