#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