时间戳

首页 > 解决方案 > Jquery 表的问题

php - Jquery 表的问题

问题描述

在上一个问题之后，我获得了关于直接选择 TR 的支持 - 我现在面临的问题是，当我将这个 SECOND TR 添加到表结构中时，我失去了来自https://的 Jquery DataTables 的所有功能datatables.net/喜欢搜索和页面计数器分机......如果我删除第二个 TR 它工作正常 - 我错过了什么？有什么矛盾的？

的HTML

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--IMPORT GREYBOX -->
    <script type="text/javascript">
     var GB_ROOT_DIR = "/greybox/";
    </script>

    <script type="text/javascript" src="greybox/AJS.js"></script>
    <script type="text/javascript" src="greybox/gb_scripts.js"></script>
    <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <script src="js/main.js"></script>
    
    

    <script type="text/javascript">
        $(document).ready(function() {
        $('#table_idh').DataTable();});
    </script>
    
    
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand fa fa-car" href="#"><span style="color:orange;font-family: impact; margin-left: 5px;">MTC AUTO</span></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="addClient" href="addRecord.php" title="Add Client" rel="gb_page_center[500,500]">Add Client</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form action="inc/server.php?logout=true" method="POST">
        <input type="button" disabled class="btn btn-primary m15" value="Hello <? echo $username; ?>">
        <input type="submit" class="btn btn-warning m15" name="logout" value="Logout">
    </form>
  </div>
</nav>
<div class="container" style="margin-top: 95px;">
    <table id="table_idh" class="display m95">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Phone Number</th>
            <th>Email</th>
            <th>Date/Birth</th>
            <th>Income</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <!-- Get Records From Db-->
        <?php include 'inc/getRecords.php'; ?>
    </tbody>
</table>
</div>

jQuery

$(document).ready(()=> {
const $addClient = $('#addClient');

$addClient.hover(()=>{
    $addClient.css({"color":"red","text-decoration":"underline"});
},()=> {
    $addClient.css({"color":"black","text-decoration":"none"});
});

$('.trigger').on('click',(e) => {
    $(e.target).closest('tr').next('tr').toggleClass('hide');
})

})

来自数据库循环的表格插入 - 当我删除它时，第二个 TR 导致问题我得到了所有功能 -

echo "
                <tr>
                    <td class='trigger'>".$firstName."</td>
                    <td>".$lastName."</td>
                    <td>".$phone."</td>
                    <td><a href='mailto:".$email."'>".$email."</a></td>
                    <td>".$dob."</td>
                    <td>".$emp_income."</td>
                    <td>".$dateIn."</td>
                </tr>
                <tr class='hide'>
                    <td colspan=7>Address: ".$address." <br> Province: ".$prov." <br> Postal Code: 

".$post." <br>RentOrOwn: ".$rent_or_own." <br>House Payment: ".$house_payment."<br>Shopping: ".$shopping."<br> Employer:".$emp_name."<br>Job Title: ".$emp_title."<br>Employment Time: ".$emp_time."<br>Downpayment: ".$downpayment." </td>
                    </tr>
                    ";

标签： phpjquery

解决方案

请在最后使用/加载表格激活代码。

$(document).ready(function() {
        $('#table_idh').DataTable();
});

您可以在页面正文的底部使用它。并在加载引导文件后加载 cdn.datatables.net 文件。身体的页脚/底部将是最好的。

＃＃＃＃ 解决方案 ＃＃＃＃

通过为每个单元格添加一个“不可见”单元格来解决 colspan 支持的问题。

echo "
                <tr>
                    <td class='trigger'>".$firstName."</td>
                    <td>".$lastName."</td>
                    <td>".$phone."</td>
                    <td><a href='mailto:".$email."'>".$email."</a></td>
                    <td>".$dob."</td>
                    <td>".$emp_income."</td>
                    <td>".$dateIn."</td>
                </tr>

                <tr class='hide' >
                    <td width='100%'>
                        Address: ".$address." 
                        <br> Province: ".$prov." 
                        <br> Postal Code: ".$post." 
                        <br>RentOrOwn: ".$rent_or_own." 
                        <br>House Payment: ".$house_payment."
                        <br>Shopping: ".$shopping."
                        <br> Employer:".$emp_name."
                        <br>Job Title: ".$emp_title."
                        <br>Employment Time: ".$emp_time."
                        <br>Downpayment: xxx".$downpayment." 
                        </td>

                        <!-- hidden column 6 for proper DataTable applying -->
                         <td style='display: none'></td>
                         <td style='display: none'></td>
                         <td style='display: none'></td>
                         <td style='display: none'></td>
                         <td style='display: none'></td>
                         <td style='display: none'></td>
                         <td style='display: none'></td>
                    </tr>

                ";

推荐阅读