Pemrosesan ServerSide DataTables dengan PHP dan MySQL

DataTables adalah perpustakaan jQuery yang menampilkan catatan daftar dalam tabel HTML menggunakan antarmuka yang intuitif. Ini menawarkan fitur seperti pencarian, pagination, dan sort.

Dalam artikel sebelumnya, kami melihat kode khusus yang memungkinkan pencarian dan pagination catatan. Selain itu, DataTables akan memungkinkan kita untuk membatasi jumlah record yang ditampilkan pada sebuah halaman.

Ekstensi DataTables mendukung pemrosesan sisi klien dan sisi server. Artikel ini akan menunjukkan kepada Anda hasil database menggunakan pemrosesan sisi server DataTables.

File PHP memanggil kelas domain dengan mengirimkan tabel, kolom, dan detail konfigurasi ke fungsi. Kelas domain mengeksekusi kueri dan mengembalikan larik hasil. Format JSON mengkodekan array yang dihasilkan dan akan dikirim sebagai respons terhadap program AJAX DataTables .

Kode Pendefinisian DataTable

Kode ini mendefinisikan kode HTML untuk DataTable. Kode ini membutuhkan pustaka CSS dan JavaScript. Tag HTML tabel berisi atribut id yang digunakan untuk mendefinisikan dan menetapkan tabel sebagai DataTable.

	<?php
	// DB table to use
	$table = 'worldcountryList';
	// Table's primary key
	$primaryKey = 'id';
	// An array of columns from the database that should be read and returned to DataTables.
	// The 'db' parameter is the database column name, and the 'dt parameter the DataTables column ID.
	// In this example, object parameter names
	$columns = array( array('db' => 'id', 'dt' => 0),
	array('db' => 'name', 'dt' => 1),
	array('db' => 'alpha_2', 'dt' => 2),
	array('db' => 'alpha_3', 'dt' => 3)
	);
	// SQL server connection information
	$sql_details = array(
	'user' => 'root',
	'pass' => '******',
	'db' => 'database',
	'host' => 'localhost'
	);
	// Helper functions for building a DataTables server-side processing SQL query
	require('ssp.class.php');
	echo json_encode(SSP::simple($_POST, $sql_details, $table, $primaryKey, $columns));

view raw dataList.php hosted with ❤ by GitHub

	<!-- DataTable CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" />
	<!-- DataTable Script -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" ></script>
	<table id="table_list" class="dataTable" width="100%" cellspacing="0">
	<thead>
	<tr>
	<th>S.No.</th>
	<th>Country</th>
	<th>ISO Alpha-2 Code </th>
	<th>ISO Alpha-3 Code </th>
	</tr>
	</thead>
	</table>
	<script>
	$(document).ready(function(e){
	$('#table_list').dataTable({
	"bProcessing": true,
	"serverSide": true,
	"ajax":{
	url :"dataList.php",
	type: "POST",
	error: function(){
	$("#error").show();
	}
	}
	});
	});
	</script>

view raw source.html hosted with ❤ by GitHub

a

Share :