Belajar menampilkan data tabel menggunakan datatable jquery

permisi, saya mengikuti tutorial disalah satu website, lumayan cukup lengkap. tapi permasalahannya data yg saya tidak muncul. mungkin salah di scropt java nya, soalnya data tabelnya saya pake tabel yg saya punya dan tidak sama denga tutorial. mohon bantuannya ya. berikut kodenya

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
	class produkmodel extends CI_Model {
	public function filter($search, $limit, $start, $order_field, $order_ascdesc){
	$this->db->like('id_produk', $search); // Untuk menambahkan query where LIKE
	$this->db->or_like('nama', $search); // Untuk menambahkan query where OR LIKE
	$this->db->or_like('jenis', $search); // Untuk menambahkan query where OR LIKE
	$this->db->or_like('harga', $search); // Untuk menambahkan query where OR LIKE
	$this->db->or_like('jumlah_stok', $search); // Untuk menambahkan query where OR LIKE
	$this->db->or_like('deskripsi', $search); // Untuk menambahkan query where OR LIKE
	$this->db->or_like('image', $search); // Untuk menambahkan query where OR LIKE
	$this->db->order_by($order_field, $order_ascdesc); // Untuk menambahkan query ORDER BY
	$this->db->limit($limit, $start); // Untuk menambahkan query LIMIT
	return $this->db->get('produk')->result_array(); // Eksekusi query sql sesuai kondisi diatas
	}
	public function count_all(){
    return $this->db->count_all('produk'); // Untuk menghitung semua data siswa
	}
	public function count_filter($search){
	$this->db->like('id_produk', $search); // Untuk menambahkan query where LIKE
	$this->db->or_like('nama', $search); // Untuk menambahkan query where OR LIKE
	$this->db->or_like('jenis', $search); // Untuk menambahkan query where OR LIKE
	$this->db->or_like('harga', $search); // Untuk menambahkan query where OR LIKE
	$this->db->or_like('jumlah_stok', $search); // Untuk menambahkan query where OR LIKE
	$this->db->or_like('deskripsi', $search); // Untuk menambahkan query where OR LIKE
	$this->db->or_like('image', $search); // Untuk menambahkan query where OR LIKE
	return $this->db->get('produk')->num_rows(); // Untuk menghitung jumlah data sesuai dengan filter pada textbox pencarian

	}
	public function select{
		$this->db->select(*);
		$this->db->from('produk');
			return $this->db->get('produk');
	}
	}

controller

    <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
	class Produk extends CI_Controller {
		public function __construct(){
			parent::__construct();
			$this->load->model('produkmodel');
			}
		public function index(){
		$this->load->view('view');
		}
		public function view(){
		$search = $_POST['search']['value']; // Ambil data yang di ketik user pada textbox pencarian
		$limit = $_POST['length']; // Ambil data limit per page
		$start = $_POST['start']; // Ambil data start
		$order_index = $_POST['order'][0]['column']; // Untuk mengambil index yg menjadi acuan untuk sorting
		$order_field = $_POST['columns'][$order_index]['data']; // Untuk mengambil nama field yg menjadi acuan untuk sorting
		$order_ascdesc = $_POST['order'][0]['dir']; // Untuk menentukan order by "ASC" atau "DESC"
		$sql_total = $this->produkmodel->count_all(); // Panggil fungsi count_all pada SiswaModel
		$sql_data = $this->produkmodel->filter($search, $limit, $start, $order_field, $order_ascdesc); // Panggil fungsi filter pada SiswaModel
		$sql_filter = $this->produkmodel->count_filter($search); // Panggil fungsi count_filter pada SiswaModel
		$callback = array(        'draw'=>$_POST['draw'], // Ini dari datatablenya
		'recordsTotal'=>$sql_total,
		'recordsFiltered'=>$sql_filter,
		'data'=>$sql_data    );
		header('Content-Type: application/json');
		echo json_encode($callback); // Convert array $callback ke json
		}}

view

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Implementasi Jquery Datatable dengan Codeigniter</title>
<!-- Load Datatable & Bootsrap CSS -->
<link rel="stylesheet" type="text/css" href="<?php echo base_url('css/bootstrap.min.css') ?>"/>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('datatables/lib/css/dataTables.bootstrap.min.css') ?>"/>
</head>
<body>
<div class="container">
<div style="background: whitesmoke;padding: 10px;">
<h1 style="margin-top: 0;">Implementasi Jquery Datatable dengan Codeigniter</h1>
</div>
<div class="table-responsive">
<table class="table table-bordered" id="table-siswa">
<thead>
<tr>
        <th>ID</th>
		<th>Nama</th>
		<th>Jenis</th>
		<th>Harga</th>
		<th>Jumlah Stock</th>
		<th>Deskripsi</th>
		<th>Image</th>
		<th>Aksi</th>
</tr>
</thead>
  <tbody></tbody>
  </table>
  </div>    </div>
  <!-- Load Jquery & Datatable JS -->
  <script type="text/javascript" src="<?php echo base_url('js/jquery.min.js') ?>"></script>
  <script type="text/javascript" src="<?php echo base_url('datatables/datatables.min.js') ?>"></script>
  <script type="text/javascript" src="<?php echo base_url('datatables/lib/js/dataTables.bootstrap.min.js') ?>"></script>
  <script>
  var tabel = null;
  $(document).ready(function() {
	  tabel = $('#table-produk').DataTable({
		  "processing": true,
		  "serverSide": true,
		  "ordering": true, // Set true agar bisa di sorting
		  "order": [[ 0, 'asc' ]], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama)
		  "ajax":            {
			  "url": "<?php echo base_url('index.php/produk/view') ?>", // URL file untuk proses select datanya
			  "type": "POST"            },
			  "deferRender": true,
			  "aLengthMenu": [[5, 10, 50],[ 5, 10, 50]], // Combobox Limit
			  "columns": [
			  { "data": "id_produk" }, // Tampilkan nis
			  { "data": "nama" },  // Tampilkan nama
			  { "data": "jenis" }, // Tampilkan telepon
			  { "data": "harga" }, // Tampilkan alamat
			  { "data": "jumlah_stok" }, // Tampilkan alamat
			  { "data": "deskripsi" }, // Tampilkan alamat
			  { "data": "image" }, // Tampilkan alamat
			  { "render": function ( data, type, row ) { // Tampilkan kolom aksi
			  var html  = "<a href=''>EDIT</a> | "
			  html += "<a href=''>DELETE</a>"
			  return html
			  }
			  },
			  ],
			  });
			  });    </script>  </body></html>

avatar fitridewi
@fitridewi

26 Kontribusi 3 Poin

Diperbarui 4 tahun yang lalu

1 Jawaban:

ini nampilin datanya pakai ajax/javascript. pakai javascript memang enak karena misal ada penambahan data, page tidak perlu refresh secara keseluruhan, hanya dibagian tbody aja, cuma klo nemu error dikit, nyarinya susah karena biasanya ga nampil apa2.

Lebih enak nampilin datanya pakai php aja, dimasukin ke datatable, klo cuma mau pakai datatable aja, karena klo pakai php ada kesalahan langsung bisa dilihat, karena muncul pesan kesalahan.

coba aja pakai foreach nya php biasa dipadu dengan datatable.net.

pakai tabel dari datatable.net kan biar mudah dan simple tidak perlu bikin fungsi search, pagination yang dibutuhkan di tabel.

avatar alexistdev
@alexistdev

25 Kontribusi 11 Poin

Dipost 4 tahun yang lalu

Login untuk ikut Jawaban