Блог

Главная - Вопросы по программированию - Bootstrap jQuery Datatable не работает

Bootstrap jQuery Datatable не работает

#javascript #jquery #twitter-bootstrap #datatable

#javascript #jquery #twitter-bootstrap #datatable

Вопрос:

Я все еще работаю с предыдущим проектом базы данных.

Я пытаюсь показать таблицу для моего списка объектов в таблице, но таблицы данных jQuery здесь не работают. Я использовал jQuery Sortable, и он не работает, поэтому я перешел на jQuery Datatables для начальной загрузки, и он также не работает, есть ли какие-либо проблемы с кодом?

Вот мои коды :

 <!DOCTYPE html>
<html lang="en">
  <head>
  <?php
    session_start();
    ?>
    <title>Dashboard</title>

    <link href="/gyankapratama/css/bootstrap.css" rel="stylesheet">

    <link href="/gyankapratama/css/sb-admin.css" rel="stylesheet">
    <link rel="stylesheet" href="/gyankapratama/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" media="all" href="/gyankapratama/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" media="all" href="/gyankapratama/css/dataTables.bootstrap.css">

    <script src="/gyankapratama/js/jquery.js"></script>
    <script src="/gyankapratama/js/bootstrap.js"></script>
    <script type="text/javascript" src="/gyankapratama/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="/gyankapratama/js/dataTables.bootstrap.js"></script>



    <link rel="icon" 
      type="image/png" 
      href="/gyankapratama/img/favicon.png">

  </head>

  <body>
<script type="text/javascript">
$(document).ready(function() {
    $('#example').dataTable();
} );
</script>
    <div id="wrapper">

      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.php">Administrator Dashboard</a>
        </div>


        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav side-nav">
            <li><a href="index.php"><i class="fa fa-dashboard"></i> Dashboard</a></li>
            <li><a href="input.php"><i class="fa fa-edit"></i> Input Pelamar</a></li>
            <li class="active"><a href="daftar.php"><i class="fa fa-table"></i> Daftar Pelamar</a></li>
            <li><a href="arsip.php"><i class="fa fa-briefcase"></i> Arsip Pelamar</a></li>

            <!-- Super Admin Role --> 
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-group"></i> Administrator <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="daftar_adm.php">Daftar Administrator</a></li>
                <li><a href="add_adm.php">Tambah Administrator</a></li>
              </ul>
            </li>

          </ul>

          <ul class="nav navbar-nav navbar-right navbar-user">
            <li class="dropdown user-dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <?php echo $_SESSION['username']; ?> <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="profile.php"><i class="fa fa-user"></i> Profile</a></li>
                <li class="divider"></li>
                <li><a href="logout.php"><i class="fa fa-power-off"></i> Log Out</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>

      <div id="page-wrapper">

        <div class="row">
          <div class="col-lg-12">
            <h1>Pelamar <small> Daftar data pelamar</small></h1>
            <ol class="breadcrumb">
              <li><i class="fa fa-home"></i> Dashboard</li>
              <li class="active">Daftar Pelamar</li>
            </ol>
          </div>
        </div>

        <div class="row">
        <div class="col-lg-12">

    <center>
</form>
<form name="search" action="cari.php" method="post">
 Cari : 

   <input type="text" pattern="[a-zA-Z0-9. -] " name="query" id="query" required/>

berdasar
<select NAME="field">
<option value="nama_pelamar">Nama</option>
<option value="kelamin_pelamar">Jenis Kelamin</option>
<option value="kec_pelamar">Kecamatan</option>
<option value="kota_pelamar">Kota</option>
<option value="pendidikan_pelamar">Pendidikan</option>
<option value="status_pelamar">Status</option>
<option value="perusahaan_pelamar">Tujuan Perusahaan</option>
</select>
<input type="submit" name="search" value="Search" />
</form>
    </center><br/>
<div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr align="center">
    <th>CEK</th>
    <th>NO</th>
    <th>NAMA LENGKAP</th>
    <th>JENIS KELAMIN</th>
    <th>USIA</th>
    <th>KECAMATAN</th>
    <th>KOTA</th>
    <th>PENDIDIKAN</th>
    <th>STATUS</th>
    <th>PERUSAHAAN</th>
    <th>DETAIL</th>
    <th colspan = "2">AKSI</th>
</tr>
</thead>
<tbody>
<?php
include "connect.php";
$i=1;
$sql = mysql_query ("select * from pelamar");
while ($data = mysql_fetch_array($sql)){

$today = new DateTime();
$lahir = mysql_real_escape_string($data['lahir_pelamar']);
$lahir = new DateTime($lahir);
$usia_pelamar = $today->diff($lahir);
$usia_pelamar = $usia_pelamar->format('%y Tahun');

    echo "

    <tr align='center'>
        <td> <input type='checkbox' class=$data[Id_pelamar] name=$data[Id_pelamar]/> </td>
        <td> $i </td>
        <td> $data[nama_pelamar] </td>
        <td> $data[kelamin_pelamar] </td>
        <td> $usia_pelamar </td>
        <td> $data[kec_pelamar] </td>
        <td> $data[kota_pelamar] </td>
        <td> $data[pendidikan_pelamar] </td>
        <td> $data[status_pelamar] </td>
        <td> $data[perusahaan_pelamar] </td>
        <td> <a href = detail.php?Id_pelamar=$data[Id_pelamar]>Lihat</a></td>
        <td> <a href = edit.php?Id=$data[Id_pelamar]><img src='/gyankapratama/img/edit.png' alt='edit' width='32' height='32'></a> </td>
        <td> <a href = "; echo "javascript:confirmDelete('delete.php?Id_pelamar=$data[Id_pelamar]')><img src='/gyankapratama/img/delete.png' alt='edit' width='32' height='32'></a> </td>
    </tr>";
        $i  ;
}
?>
</tbody>
</table>
</div></div>
<br></div>    </div>

          </div>
        </div


      </div>

    </div>
    <script>
    function confirmDelete(delUrl) {
      if (confirm("Anda yakin akan menghapus?")) {
       document.location = delUrl;
      }
    }
</script>
  </body>
</html>

Комментарии:

1. какую ошибку вы получаете в консоли, просто опубликуйте ее, и, кроме того, datatable не поддерживает colspan, как это есть в таблице примеров…

2. Ошибки нет, он просто не работает (не сортируется, нет формы поиска, работает только css)

3. между несколькими файлами js должен быть конфликт…. просто вырежьте datatable js и поместите его в начало всех файлов js…

4. Это не работает. Я действительно делал это раньше в другом проекте, я понятия не имею, почему он сейчас не работает

5. Не берите в голову, colspan, препятствующий работе Datables. Спасибо, что напомнили мне о col span