Bị lỗi đọan javascript

xuxutrinh · November 8, 2015, 7:57am

Mọi người ơi, em đang làm đoạn javascript lọc tìm kiếm dữ liệu trong bảng. Nhưng nó không chạy. Em cũng không biết nó bị lỗi gì nữa. em áp dụng js đó vào test không kết nối csdl thì nó chạy bình thường a.

<?php
    		$sql ="SELECT mamon,tenmon,loaimon,dongiale FROM monan, loaimon WHERE monan.loaimon = loaimon.MaLoaiMon";
    		$monan= mysql_query($sql);
    ?>
    <script type="text/javascript" src="http://listjs.com/no-cdn/list.js"></script>
    <script type="text/javascript">
    
    		var options = {
    			  valueNames: [ 'tenmon' ]
    			};
    		var monanList = new List('monan', options);
    </script>
    
    <link rel="stylesheet" type="text/css" href="../quantri/css/css-input.css"/>
    
    <div class="monan" id="monan">
      <input class="search" placeholder="Search" />
      <button class="sort" data-sort="name">Sort by name </button>
          
      <table>
                	<!--<tr>
                        <td width="35" height="31">STT</td>
                        <td width="96">Mã món</td>
                        <td width="107">Tên món</td>
                        <td width="102">Loại món</td>
                        <td width="111">Đơn giá (VNĐ)</td>
                        <td colspan="2">Quản trị</td>
          			</tr>-->
                   
                 <tbody class="list" >
                  <?php
    					$i = 1;
    					while($dong = mysql_fetch_array($monan)){
     		 		?>
                   <tr>
                     <td width="35" height="31" ><?php echo $i ?></td>
                     <td width="44" ><?php echo $dong["mamon"] ?></td>
                     <td width="121" class="tenmon" id="tenmon"><?php echo $dong["tenmon"] ?></td>
                     <td width="48"><?php echo $dong["loaimon"] ?></td>
                     <td width="54" ><?php echo $dong["dongiale"] ?></td>
                     <td width="32">
                        <a href="indexqtri.php?quanly=monan&ac=suamon&mamon=<?php echo $row["mamon"]?>">
                      <img src="../images/icon/SUA.png"/>
                         </a>       
            		</td>
           			<td width="38">
            	 		<a href="modules/monan/xulyMA.php?mamon=<?php echo $row["mamon"] ?>">
                               <img src="../images/icon/xoa1.gif"  onclick="xoa()"; />
                        </a>
            		</td>
                    <?php 
    			$i++; 
    			}
    		?>
          		</tr> 
    		
         	</tbody>    
         </table>
    </div>

xuxutrinh · November 8, 2015, 11:10am

up up up mọi người sửa giúp em với

masoivn · November 9, 2015, 4:22am

chưa nhúng jquery vào thì làm sao chạy được thư viện của người ta.
Đưa tất cả code lên đây từ html, jquery. Thì mới kiểm tra được.

masoivn · November 9, 2015, 8:49am

Hãy làm sao html ra giống như vậy là được. Phần include js, css thì nên để header. Code js thì để ở cuối page giống như ví dụ dưới.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test list jquery</title>
<style type="text/css">
    .list {
      font-family:sans-serif;
    }
    td {
      padding:10px; 
      border:solid 1px #eee;
    }

    input {
      border:solid 1px #ccc;
      border-radius: 5px;
      padding:7px 14px;
      margin-bottom:10px
    }
    input:focus {
      outline:none;
      border-color:#aaa;
    }
    .sort {
      padding:8px 30px;
      border-radius: 6px;
      border:none;
      display:inline-block;
      color:#fff;
      text-decoration: none;
      background-color: #28a8e0;
      height:30px;
    }
    .sort:hover {
      text-decoration: none;
      background-color:#1b8aba;
    }
    .sort:focus {
      outline:none;
    }
    .sort:after {
      display:inline-block;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid transparent;
      content:"";
      position: relative;
      top:-10px;
      right:-5px;
    }
    .sort.asc:after {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid #fff;
      content:"";
      position: relative;
      top:4px;
      right:-5px;
    }
    .sort.desc:after {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid #fff;
      content:"";
      position: relative;
      top:-4px;
      right:-5px;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://listjs.com/no-cdn/list.js"></script>
</head>
<body>
    <div id="users">
      <input class="search" placeholder="Search" />
      <button class="sort" data-sort="name">
        Sort by name
      </button>
      <table>
        <!-- IMPORTANT, class="list" have to be at tbody -->
        <tbody class="list">
          <tr>
            <td class="name">Jonny Stromberg</td>
            <td class="born">1986</td>
            <td>aaaaaa</>
          </tr>
          <tr>
            <td class="name">Jonas Arnklint</td>
            <td class="born">1985</td>
            <td>aaaaaa</>
          </tr>
          <tr>
            <td class="name">Martina Elm</td>
            <td class="born">1986</td>
            <td>aaaaaa</>
          </tr>
          <tr>
            <td class="name">Gustaf Lindqvist</td>
            <td class="born">1983</td>
            <td>aaaaaa</>
          </tr>
          <tr>
            <td class="name">Minh Quân</td>
            <td class="born">1983</td>
            <td>aaaaaa</>
          </tr>
          <tr>
            <td class="name">Minh Quang</td>
            <td class="born">1983</td>
            <td>aaaaaa</>
          </tr>
          <tr>
            <td class="name">Phạm Hoàng Thông</td>
            <td class="born">1983</td>
            <td>aaaaaa</>
          </tr>
        </tbody>
      </table>

    </div>

    <script>
        $(document).ready(function(){
            var options = {
              valueNames: [ 'name', 'born' ]
            };

            var userList = new List('users', options);
        });        
    </script>
</body>
</html>

kyllynk · November 9, 2015, 6:39am

@xuxutrinh: Bạn để JS lên đầu mà ko dùng sự kiện window.onload thì code của bạn sao chạy được. Mình nhớ có 1 topic mình đã hướng dẫn bạn để code vào trong hàm onload rồi mà. Hàm này tương ứng với $(document).ready() trong jQuery. Nó có tác dụng là chạy code bên trong hàm sau khi html đã được load xong hết.

Cấu trúc của window.load :

window.onload = function(){
     //Để code ở đây
}

Cấu trúc của jQuery:

$(document).ready(function(){
    //Để code ở đây
})