หัวข้อ: เอา Table มาแบ่งหน้า ด้วย Bootstrap Datatable แค่ 2 ขั้นตอน
เริ่มหัวข้อโดย: nscyber ที่ 25 สิงหาคม 2018, 20:23:44
(https://www.img.in.th/images/8f9be70288958b7ae9b83577aaed7cd4.png) คุณเคยประสบปัญหาในการแบ่งหน้าตารางหรือป่าว อยากหาเครื่องมือหรือไลบลารี่ดี ๆ มาช่วยให้ง่ายขึ้น วันนี้ผมขอเสนอ Bootstrap Datatable ในการช่วยแบ่งหน้าให้คุณ หลาย ๆ ท่านอาจจะเคยรู้จักอยู่แล้วแล้วใช้อยู่ด้วยเป็นประจำ ถ้างั้นมาเริ่มกันเลย ขั้นตอนที่ 1- นำโค้ด bootstrap และ jquery นี้ไว้ภายใน <head> สำหรับใครที่มีอยู่แล้วไม่ต้องใส่นะครับ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> - นำโค้ด Bootstrap Datatable ไว้ต่อจากเมื่อกี้ในบรรทัดต่อไปเลย <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script> - นำโค้ดนี้วางไว้ในบรรทัดต่อไป จากขั้นตอนเมื่อสักครู่ โดย 1. #example คือ ID ของตาราง ถ้าตั้งไว้ว่า id="table1" ก็ใส่ #table1 ตารางไหนอยากให้มันซอยหน้าให้ก็เอาไอดีนี้ไปใส่ 2. "pageLength": 10 คือ ให้แสดงผลได้ 10 แถวต่อ 1 หน้า 3. "searching": false คือ เปิด=true ปิด=false ช่องค้นหาครอบจักรวาล 4. "lengthChange": false คือ เปิด=true ปิด=false ช่องปรับขนาดการแสดงผล <script> $(document).ready(function() { $('#example').DataTable({ "pageLength": 10, //จำนวนข้อมูลที่ให้แสดง ต่อ 1 หน้า "searching": false,//เปิด=true ปิด=false ช่องค้นหาครอบจักรวาล "lengthChange": false,//เปิด=true ปิด=false ช่องปรับขนาดการแสดงผล }); }); </script>
ขั้นตอนที่ 2- ให้ใส่ id="example" ไว้ในแท็ก table ตัวอย่าง <table id="example"> - ให้ใส่ class="table table-striped table-bordered" ไว้ในแท็ก table ตัวอย่าง <table id="example" class="table table-striped table-bordered"> - ให้ใส่แท็ก <thead> </thead> ไว้ในส่วนที่จะแสดงส่วนหัวข้อในตาราง - ให้ใส่แท็ก <tbody> </tbody> ไว้ในส่วนของข้อมูลที่เป็นเนื้อหาในตาราง รายการในตาราง <table id="example" class="table table-striped table-bordered"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> </tbody> </table>
ภาพรวมเมื่อใส่ทั้งหมดแล้ว<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script> <script> $(document).ready(function() { $('#example').DataTable({ "pageLength": 10, //จำนวนข้อมูลที่ให้แสดง ต่อ 1 หน้า "searching": false,//เปิด=true ปิด=false ช่องค้นหาครอบจักรวาล "lengthChange": false,//เปิด=true ปิด=false ช่องปรับขนาดการแสดงผล }); }); </script> </head> <body> <table id="example" class="table table-striped table-bordered"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> </tbody> </table> </body> </html>
หัวข้อ: Re: เอา Table มาแบ่งหน้า ด้วย Bootstrap Datatable แค่ 2 ขั้นตอน
เริ่มหัวข้อโดย: narincr ที่ 26 สิงหาคม 2018, 14:16:50
แบบนี้ข้อเสียคือ
ถ้ามีแบบ 10,000 Record จะเรียกออกมาหมดเลย แล้วค่อยแบ่งหน้า แต่ถ้ามีข้อมูลเกิน 100 แนะนำให้เขียนเพิ่มโดยใช้ Ajax เรียก json data ใช้ Code ต้นแบบเหมือนเดิม แต่เรียกตัวนี้เพิ่มครับ
https://datatables.net/examples/server_side/simple.html
แบบนี้เรียกว่า Server side ครับ
หัวข้อ: Re: เอา Table มาแบ่งหน้า ด้วย Bootstrap Datatable แค่ 2 ขั้นตอน
เริ่มหัวข้อโดย: CherryX ที่ 26 สิงหาคม 2018, 15:10:25
มาเก็บความรู้ ขอบคุณคะ :wanwan017:
หัวข้อ: Re: เอา Table มาแบ่งหน้า ด้วย Bootstrap Datatable แค่ 2 ขั้นตอน
เริ่มหัวข้อโดย: kondam ที่ 26 สิงหาคม 2018, 16:04:47
ขอบคุณครับ :wanwan011:
หัวข้อ: Re: เอา Table มาแบ่งหน้า ด้วย Bootstrap Datatable แค่ 2 ขั้นตอน
เริ่มหัวข้อโดย: kar2u ที่ 26 สิงหาคม 2018, 16:45:53
ขอบคุณครับ :wanwan017:
หัวข้อ: Re: เอา Table มาแบ่งหน้า ด้วย Bootstrap Datatable แค่ 2 ขั้นตอน
เริ่มหัวข้อโดย: nscyber ที่ 26 สิงหาคม 2018, 17:04:29
แบบนี้ข้อเสียคือ
ถ้ามีแบบ 10,000 Record จะเรียกออกมาหมดเลย แล้วค่อยแบ่งหน้า แต่ถ้ามีข้อมูลเกิน 100 แนะนำให้เขียนเพิ่มโดยใช้ Ajax เรียก json data ใช้ Code ต้นแบบเหมือนเดิม แต่เรียกตัวนี้เพิ่มครับ
[url]https://datatables.net/examples/server_side/simple.html[/url]
แบบนี้เรียกว่า Server side ครับ
เยี่ยมเลยครับ :-[
หัวข้อ: Re: เอา Table มาแบ่งหน้า ด้วย Bootstrap Datatable แค่ 2 ขั้นตอน
เริ่มหัวข้อโดย: Fallen ที่ 26 สิงหาคม 2018, 19:45:27
อันนี้เป็นอีกแบบ ดึงจาก database เลยครับ แค่ 3 ไฟล์ก็ดึง Database มาได้แล้วindex.php <link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.min.css"> <script src="media/js/jquery.js" type="text/javascript"></script> <script src="media/js/jquery.dataTables.js" type="text/javascript"></script> <script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script> <style media="screen"> .content{ width: 900px; margin:0 auto; padding: 10px; border: 1px solid #999; } </style> </head> <body> <div class="content"> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>First name</th> <th>Last name</th> <th>Position</th> <th>Office</th> <th>Start date</th> <th>Salary</th> </tr> </thead>
</table> </div>
<script type="text/javascript"> $(document).ready(function() { $('#example').DataTable( { "processing": true, "serverSide": true, "ajax": "server_processing.php", } ); } ); </script> server_processing.php<?php $table = 'ชื่อเทเบิ้ล'; $primaryKey = 'id';
//ข้อมูลอะเรที่ส่งไป datables $columns = array( array( 'db' => 'id_msg','dt' => 0), array( 'db' => 'id', 'dt' => 1 ), array( 'db' => 'id_board', 'dt' => 2 ), array( 'db' => 'subject', 'dt' => 3 ), array( 'db' => 'poster_time', 'dt' => 4 ), array( 'db' => 'modified_time','dt' => 5 ), ); $sql_details = array( 'user' => 'ยูสเซอร์', 'pass' => 'พาส', 'db' => 'ชื่อดาต้าเบส', 'host' => 'localhost' ); require( 'ssp.class.php' ); //ส่งข้อมูลกลับไปเป็น JSON echo json_encode( SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns ) );
ssp.class.php<?php
/* * Helper functions for building a DataTables server-side processing SQL query * * The static functions in this class are just helper functions to help build * the SQL used in the DataTables demo server-side processing scripts. These * functions obviously do not represent all that can be done with server-side * processing, they are intentionally simple to show how it works. More complex * server-side processing operations will likely require a custom script. * * See http://datatables.net/usage/server-side for full details on the server- * side processing requirements of DataTables. * * @license MIT - http://datatables.net/license_mit */
class SSP { /** * Create the data output array for the DataTables rows * * @param array $columns Column information array * @param array $data Data from the SQL get * @return array Formatted data in a row based format */ static function data_output ( $columns, $data ) { $out = array();
for ( $i=0, $ien=count($data) ; $i<$ien ; $i ) { $row = array();
for ( $j=0, $jen=count($columns) ; $j<$jen ; $j ) { $column = $columns[$j];
// Is there a formatter? if ( isset( $column['formatter'] ) ) { $row[ $column['dt'] ] = $column['formatter']( $data[$i][ $column['db'] ], $data[$i] ); } else { $row[ $column['dt'] ] = $data[$i][ $columns[$j]['db'] ]; } }
$out[] = $row; }
return $out; }
/** * Database connection * * Obtain an PHP PDO connection from a connection details array * * @param array $conn SQL connection details. The array should have * the following properties * * host - host name * * db - database name * * user - user name * * pass - user password * @return resource PDO connection */ static function db ( $conn ) { if ( is_array( $conn ) ) { return self::sql_connect( $conn ); }
return $conn; }
/** * Paging * * Construct the LIMIT clause for server-side processing SQL query * * @param array $request Data sent to server by DataTables * @param array $columns Column information array * @return string SQL limit clause */ static function limit ( $request, $columns ) { $limit = '';
if ( isset($request['start']) && $request['length'] != -1 ) { $limit = "LIMIT ".intval($request['start']).", ".intval($request['length']); }
return $limit; }
/** * Ordering * * Construct the ORDER BY clause for server-side processing SQL query * * @param array $request Data sent to server by DataTables * @param array $columns Column information array * @return string SQL order by clause */ static function order ( $request, $columns ) { $order = '';
if ( isset($request['order']) && count($request['order']) ) { $orderBy = array(); $dtColumns = self::pluck( $columns, 'dt' );
for ( $i=0, $ien=count($request['order']) ; $i<$ien ; $i ) { // Convert the column index into the column data property $columnIdx = intval($request['order'][$i]['column']); $requestColumn = $request['columns'][$columnIdx];
$columnIdx = array_search( $requestColumn['data'], $dtColumns ); $column = $columns[ $columnIdx ];
if ( $requestColumn['orderable'] == 'true' ) { $dir = $request['order'][$i]['dir'] === 'asc' ? 'ASC' : 'DESC';
$orderBy[] = '`'.$column['db'].'` '.$dir; } }
$order = 'ORDER BY '.implode(', ', $orderBy); }
return $order; }
/** * Searching / Filtering * * Construct the WHERE clause for server-side processing SQL query. * * NOTE this does not match the built-in DataTables filtering which does it * word by word on any field. It's possible to do here performance on large * databases would be very poor * * @param array $request Data sent to server by DataTables * @param array $columns Column information array * @param array $bindings Array of values for PDO bindings, used in the * sql_exec() function * @return string SQL where clause */ static function filter ( $request, $columns, &$bindings ) { $globalSearch = array(); $columnSearch = array(); $dtColumns = self::pluck( $columns, 'dt' );
if ( isset($request['search']) && $request['search']['value'] != '' ) { $str = $request['search']['value'];
for ( $i=0, $ien=count($request['columns']) ; $i<$ien ; $i ) { $requestColumn = $request['columns'][$i]; $columnIdx = array_search( $requestColumn['data'], $dtColumns ); $column = $columns[ $columnIdx ];
if ( $requestColumn['searchable'] == 'true' ) { $binding = self::bind( $bindings, '%'.$str.'%', PDO::PARAM_STR ); $globalSearch[] = "`".$column['db']."` LIKE ".$binding; } } }
// Individual column filtering if ( isset( $request['columns'] ) ) { for ( $i=0, $ien=count($request['columns']) ; $i<$ien ; $i ) { $requestColumn = $request['columns'][$i]; $columnIdx = array_search( $requestColumn['data'], $dtColumns ); $column = $columns[ $columnIdx ];
$str = $requestColumn['search']['value'];
if ( $requestColumn['searchable'] == 'true' && $str != '' ) { $binding = self::bind( $bindings, '%'.$str.'%', PDO::PARAM_STR ); $columnSearch[] = "`".$column['db']."` LIKE ".$binding; } } }
// Combine the filters into a single string $where = '';
if ( count( $globalSearch ) ) { $where = '('.implode(' OR ', $globalSearch).')'; }
if ( count( $columnSearch ) ) { $where = $where === '' ? implode(' AND ', $columnSearch) : $where .' AND '. implode(' AND ', $columnSearch); }
if ( $where !== '' ) { $where = 'WHERE '.$where; }
return $where; }
/** * Perform the SQL queries needed for an server-side processing requested, * utilising the helper functions of this class, limit(), order() and * filter() among others. The returned array is ready to be encoded as JSON * in response to an SSP request, or can be modified if needed before * sending back to the client. * * @param array $request Data sent to server by DataTables * @param array|PDO $conn PDO connection resource or connection parameters array * @param string $table SQL table to query * @param string $primaryKey Primary key of the table * @param array $columns Column information array * @return array Server-side processing response array */ static function simple ( $request, $conn, $table, $primaryKey, $columns ) { $bindings = array(); $db = self::db( $conn );
// Build the SQL query string from the request $limit = self::limit( $request, $columns ); $order = self::order( $request, $columns ); $where = self::filter( $request, $columns, $bindings );
// Main query to actually get the data $data = self::sql_exec( $db, $bindings, "SELECT `".implode("`, `", self::pluck($columns, 'db'))."` FROM `$table` $where $order $limit" );
// Data set length after filtering $resFilterLength = self::sql_exec( $db, $bindings, "SELECT COUNT(`{$primaryKey}`) FROM `$table` $where" ); $recordsFiltered = $resFilterLength[0][0];
// Total data set length $resTotalLength = self::sql_exec( $db, "SELECT COUNT(`{$primaryKey}`) FROM `$table`" ); $recordsTotal = $resTotalLength[0][0];
/* * Output */ return array( "draw" => isset ( $request['draw'] ) ? intval( $request['draw'] ) : 0, "recordsTotal" => intval( $recordsTotal ), "recordsFiltered" => intval( $recordsFiltered ), "data" => self::data_output( $columns, $data ) ); }
/** * The difference between this method and the `simple` one, is that you can * apply additional `where` conditions to the SQL queries. These can be in * one of two forms: * * * 'Result condition' - This is applied to the result set, but not the * overall paging information query - i.e. it will not effect the number * of records that a user sees they can have access to. This should be * used when you want apply a filtering condition that the user has sent. * * 'All condition' - This is applied to all queries that are made and * reduces the number of records that the user can access. This should be * used in conditions where you don't want the user to ever have access to * particular records (for example, restricting by a login id). * * @param array $request Data sent to server by DataTables * @param array|PDO $conn PDO connection resource or connection parameters array * @param string $table SQL table to query * @param string $primaryKey Primary key of the table * @param array $columns Column information array * @param string $whereResult WHERE condition to apply to the result set * @param string $whereAll WHERE condition to apply to all queries * @return array Server-side processing response array */ static function complex ( $request, $conn, $table, $primaryKey, $columns, $whereResult=null, $whereAll=null ) { $bindings = array(); $db = self::db( $conn ); $localWhereResult = array(); $localWhereAll = array(); $whereAllSql = '';
// Build the SQL query string from the request $limit = self::limit( $request, $columns ); $order = self::order( $request, $columns ); $where = self::filter( $request, $columns, $bindings );
$whereResult = self::_flatten( $whereResult ); $whereAll = self::_flatten( $whereAll );
if ( $whereResult ) { $where = $where ? $where .' AND '.$whereResult : 'WHERE '.$whereResult; }
if ( $whereAll ) { $where = $where ? $where .' AND '.$whereAll : 'WHERE '.$whereAll;
$whereAllSql = 'WHERE '.$whereAll; }
// Main query to actually get the data $data = self::sql_exec( $db, $bindings, "SELECT `".implode("`, `", self::pluck($columns, 'db'))."` FROM `$table` $where $order $limit" );
// Data set length after filtering $resFilterLength = self::sql_exec( $db, $bindings, "SELECT COUNT(`{$primaryKey}`) FROM `$table` $where" ); $recordsFiltered = $resFilterLength[0][0];
// Total data set length $resTotalLength = self::sql_exec( $db, $bindings, "SELECT COUNT(`{$primaryKey}`) FROM `$table` ". $whereAllSql ); $recordsTotal = $resTotalLength[0][0];
/* * Output */ return array( "draw" => isset ( $request['draw'] ) ? intval( $request['draw'] ) : 0, "recordsTotal" => intval( $recordsTotal ), "recordsFiltered" => intval( $recordsFiltered ), "data" => self::data_output( $columns, $data ) ); }
/** * Connect to the database * * @param array $sql_details SQL server connection details array, with the * properties: * * host - host name * * db - database name * * user - user name * * pass - user password * @return resource Database connection handle */ static function sql_connect ( $sql_details ) { try { $db = @new PDO( "mysql:host={$sql_details['host']};dbname={$sql_details['db']}", $sql_details['user'], $sql_details['pass'], array( PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION ) ); } catch (PDOException $e) { self::fatal( "An error occurred while connecting to the database. ". "The error reported by the server was: ".$e->getMessage() ); }
return $db; }
/** * Execute an SQL query on the database * * @param resource $db Database handler * @param array $bindings Array of PDO binding values from bind() to be * used for safely escaping strings. Note that this can be given as the * SQL query string if no bindings are required. * @param string $sql SQL query to execute. * @return array Result from the query (all rows) */ static function sql_exec ( $db, $bindings, $sql=null ) { // Argument shifting if ( $sql === null ) { $sql = $bindings; }
$stmt = $db->prepare( $sql ); //echo $sql;
// Bind parameters if ( is_array( $bindings ) ) { for ( $i=0, $ien=count($bindings) ; $i<$ien ; $i ) { $binding = $bindings[$i]; $stmt->bindValue( $binding['key'], $binding['val'], $binding['type'] ); } }
// Execute try { $stmt->execute(); } catch (PDOException $e) { self::fatal( "An SQL error occurred: ".$e->getMessage() ); }
// Return all return $stmt->fetchAll( PDO::FETCH_BOTH ); }
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Internal methods */
/** * Throw a fatal error. * * This writes out an error message in a JSON string which DataTables will * see and show to the user in the browser. * * @param string $msg Message to send to the client */ static function fatal ( $msg ) { echo json_encode( array( "error" => $msg ) );
exit(0); }
/** * Create a PDO binding key which can be used for escaping variables safely * when executing a query with sql_exec() * * @param array &$a Array of bindings * @param * $val Value to bind * @param int $type PDO field type * @return string Bound key to be used in the SQL where this parameter * would be used. */ static function bind ( &$a, $val, $type ) { $key = ':binding_'.count( $a );
$a[] = array( 'key' => $key, 'val' => $val, 'type' => $type );
return $key; }
/** * Pull a particular property from each assoc. array in a numeric array, * returning and array of the property values from each item. * * @param array $a Array to get data from * @param string $prop Property to read * @return array Array of property values */ static function pluck ( $a, $prop ) { $out = array();
for ( $i=0, $len=count($a) ; $i<$len ; $i ) { $out[] = $a[$i][$prop]; }
return $out; }
/** * Return a string from an array or a string * * @param array|string $a Array to join * @param string $join Glue for the concatenation * @return string Joined string */ static function _flatten ( $a, $join = ' AND ' ) { if ( ! $a ) { return ''; } else if ( $a && is_array($a) ) { return implode( $join, $a ); } return $a; } }
เพราะในการใช้จริง มันต้องดึงจาก database แต่เสียดายอย่างเดียว มันใส่ลิ้งในตารางไม่ได้ คือขั้นตอนมันยากอ่ะ มันเป็น jquery
ถ้ามันทำได้นะ มันก็จะลิ้งไปหน้า content ได้ มันก็จะเป็นน้องๆ CMS แถมยังปลอดภัยมากขึ้น ต่อการแฮกอีก น่าสนใจไหมละครับ ใครรู้ทำให้หน่อยสิครับ ขาดแค่ จิ๊กซอตัวสุดท้าย
:'(
หรือ ท่านใดทำได้ คิดราคามาหน่อยครับ ถ้าไม่เเพงเดี๋ยวผมให้สินน้ำใจครับ
:wanwan019:
หัวข้อ: Re: เอา Table มาแบ่งหน้า ด้วย Bootstrap Datatable แค่ 2 ขั้นตอน
เริ่มหัวข้อโดย: nscyber ที่ 26 สิงหาคม 2018, 20:28:26
อันนี้เป็นอีกแบบ ดึงจาก database เลยครับ แค่ 3 ไฟล์ก็ดึง Database มาได้แล้วindex.php <link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.min.css"> <script src="media/js/jquery.js" type="text/javascript"></script> <script src="media/js/jquery.dataTables.js" type="text/javascript"></script> <script src="[url]https://code.jquery.com/jquery-3.3.1.js[/url]" type="text/javascript"></script> <script src="[url]https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js[/url]" type="text/javascript"></script> <style media="screen"> .content{ width: 900px; margin:0 auto; padding: 10px; border: 1px solid #999; } </style> </head> <body> <div class="content"> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>First name</th> <th>Last name</th> <th>Position</th> <th>Office</th> <th>Start date</th> <th>Salary</th> </tr> </thead>
</table> </div>
<script type="text/javascript"> $(document).ready(function() { $('#example').DataTable( { "processing": true, "serverSide": true, "ajax": "server_processing.php", } ); } ); </script> server_processing.php<?php $table = 'ชื่อเทเบิ้ล'; $primaryKey = 'id';
//ข้อมูลอะเรที่ส่งไป datables $columns = array( array( 'db' => 'id_msg','dt' => 0), array( 'db' => 'id', 'dt' => 1 ), array( 'db' => 'id_board', 'dt' => 2 ), array( 'db' => 'subject', 'dt' => 3 ), array( 'db' => 'poster_time', 'dt' => 4 ), array( 'db' => 'modified_time','dt' => 5 ), ); $sql_details = array( 'user' => 'ยูสเซอร์', 'pass' => 'พาส', 'db' => 'ชื่อดาต้าเบส', 'host' => 'localhost' ); require( 'ssp.class.php' ); //ส่งข้อมูลกลับไปเป็น JSON echo json_encode( SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns ) );
ssp.class.php<?php
/* * Helper functions for building a DataTables server-side processing SQL query * * The static functions in this class are just helper functions to help build * the SQL used in the DataTables demo server-side processing scripts. These * functions obviously do not represent all that can be done with server-side * processing, they are intentionally simple to show how it works. More complex * server-side processing operations will likely require a custom script. * * See [url]http://datatables.net/usage/server-side for full details on the server-[/url] * side processing requirements of DataTables. * * @license MIT - [url]http://datatables.net/license_mit[/url] */
class SSP { /** * Create the data output array for the DataTables rows * * @param array $columns Column information array * @param array $data Data from the SQL get * @return array Formatted data in a row based format */ static function data_output ( $columns, $data ) { $out = array();
for ( $i=0, $ien=count($data) ; $i<$ien ; $i ) { $row = array();
for ( $j=0, $jen=count($columns) ; $j<$jen ; $j ) { $column = $columns[$j];
// Is there a formatter? if ( isset( $column['formatter'] ) ) { $row[ $column['dt'] ] = $column['formatter']( $data[$i][ $column['db'] ], $data[$i] ); } else { $row[ $column['dt'] ] = $data[$i][ $columns[$j]['db'] ]; } }
$out[] = $row; }
return $out; }
/** * Database connection * * Obtain an PHP PDO connection from a connection details array * * @param array $conn SQL connection details. The array should have * the following properties * * host - host name * * db - database name * * user - user name * * pass - user password * @return resource PDO connection */ static function db ( $conn ) { if ( is_array( $conn ) ) { return self::sql_connect( $conn ); }
return $conn; }
/** * Paging * * Construct the LIMIT clause for server-side processing SQL query * * @param array $request Data sent to server by DataTables * @param array $columns Column information array * @return string SQL limit clause */ static function limit ( $request, $columns ) { $limit = '';
if ( isset($request['start']) && $request['length'] != -1 ) { $limit = "LIMIT ".intval($request['start']).", ".intval($request['length']); }
return $limit; }
/** * Ordering * * Construct the ORDER BY clause for server-side processing SQL query * * @param array $request Data sent to server by DataTables * @param array $columns Column information array * @return string SQL order by clause */ static function order ( $request, $columns ) { $order = '';
if ( isset($request['order']) && count($request['order']) ) { $orderBy = array(); $dtColumns = self::pluck( $columns, 'dt' );
for ( $i=0, $ien=count($request['order']) ; $i<$ien ; $i ) { // Convert the column index into the column data property $columnIdx = intval($request['order'][$i]['column']); $requestColumn = $request['columns'][$columnIdx];
$columnIdx = array_search( $requestColumn['data'], $dtColumns ); $column = $columns[ $columnIdx ];
if ( $requestColumn['orderable'] == 'true' ) { $dir = $request['order'][$i]['dir'] === 'asc' ? 'ASC' : 'DESC';
$orderBy[] = '`'.$column['db'].'` '.$dir; } }
$order = 'ORDER BY '.implode(', ', $orderBy); }
return $order; }
/** * Searching / Filtering * * Construct the WHERE clause for server-side processing SQL query. * * NOTE this does not match the built-in DataTables filtering which does it * word by word on any field. It's possible to do here performance on large * databases would be very poor * * @param array $request Data sent to server by DataTables * @param array $columns Column information array * @param array $bindings Array of values for PDO bindings, used in the * sql_exec() function * @return string SQL where clause */ static function filter ( $request, $columns, &$bindings ) { $globalSearch = array(); $columnSearch = array(); $dtColumns = self::pluck( $columns, 'dt' );
if ( isset($request['search']) && $request['search']['value'] != '' ) { $str = $request['search']['value'];
for ( $i=0, $ien=count($request['columns']) ; $i<$ien ; $i ) { $requestColumn = $request['columns'][$i]; $columnIdx = array_search( $requestColumn['data'], $dtColumns ); $column = $columns[ $columnIdx ];
if ( $requestColumn['searchable'] == 'true' ) { $binding = self::bind( $bindings, '%'.$str.'%', PDO::PARAM_STR ); $globalSearch[] = "`".$column['db']."` LIKE ".$binding; } } }
// Individual column filtering if ( isset( $request['columns'] ) ) { for ( $i=0, $ien=count($request['columns']) ; $i<$ien ; $i ) { $requestColumn = $request['columns'][$i]; $columnIdx = array_search( $requestColumn['data'], $dtColumns ); $column = $columns[ $columnIdx ];
$str = $requestColumn['search']['value'];
if ( $requestColumn['searchable'] == 'true' && $str != '' ) { $binding = self::bind( $bindings, '%'.$str.'%', PDO::PARAM_STR ); $columnSearch[] = "`".$column['db']."` LIKE ".$binding; } } }
// Combine the filters into a single string $where = '';
if ( count( $globalSearch ) ) { $where = '('.implode(' OR ', $globalSearch).')'; }
if ( count( $columnSearch ) ) { $where = $where === '' ? implode(' AND ', $columnSearch) : $where .' AND '. implode(' AND ', $columnSearch); }
if ( $where !== '' ) { $where = 'WHERE '.$where; }
return $where; }
/** * Perform the SQL queries needed for an server-side processing requested, * utilising the helper functions of this class, limit(), order() and * filter() among others. The returned array is ready to be encoded as JSON * in response to an SSP request, or can be modified if needed before * sending back to the client. * * @param array $request Data sent to server by DataTables * @param array|PDO $conn PDO connection resource or connection parameters array * @param string $table SQL table to query * @param string $primaryKey Primary key of the table * @param array $columns Column information array * @return array Server-side processing response array */ static function simple ( $request, $conn, $table, $primaryKey, $columns ) { $bindings = array(); $db = self::db( $conn );
// Build the SQL query string from the request $limit = self::limit( $request, $columns ); $order = self::order( $request, $columns ); $where = self::filter( $request, $columns, $bindings );
// Main query to actually get the data $data = self::sql_exec( $db, $bindings, "SELECT `".implode("`, `", self::pluck($columns, 'db'))."` FROM `$table` $where $order $limit" );
// Data set length after filtering $resFilterLength = self::sql_exec( $db, $bindings, "SELECT COUNT(`{$primaryKey}`) FROM `$table` $where" ); $recordsFiltered = $resFilterLength[0][0];
// Total data set length $resTotalLength = self::sql_exec( $db, "SELECT COUNT(`{$primaryKey}`) FROM `$table`" ); $recordsTotal = $resTotalLength[0][0];
/* * Output */ return array( "draw" => isset ( $request['draw'] ) ? intval( $request['draw'] ) : 0, "recordsTotal" => intval( $recordsTotal ), "recordsFiltered" => intval( $recordsFiltered ), "data" => self::data_output( $columns, $data ) ); }
/** * The difference between this method and the `simple` one, is that you can * apply additional `where` conditions to the SQL queries. These can be in * one of two forms: * * * 'Result condition' - This is applied to the result set, but not the * overall paging information query - i.e. it will not effect the number * of records that a user sees they can have access to. This should be * used when you want apply a filtering condition that the user has sent. * * 'All condition' - This is applied to all queries that are made and * reduces the number of records that the user can access. This should be * used in conditions where you don't want the user to ever have access to * particular records (for example, restricting by a login id). * * @param array $request Data sent to server by DataTables * @param array|PDO $conn PDO connection resource or connection parameters array * @param string $table SQL table to query * @param string $primaryKey Primary key of the table * @param array $columns Column information array * @param string $whereResult WHERE condition to apply to the result set * @param string $whereAll WHERE condition to apply to all queries * @return array Server-side processing response array */ static function complex ( $request, $conn, $table, $primaryKey, $columns, $whereResult=null, $whereAll=null ) { $bindings = array(); $db = self::db( $conn ); $localWhereResult = array(); $localWhereAll = array(); $whereAllSql = '';
// Build the SQL query string from the request $limit = self::limit( $request, $columns ); $order = self::order( $request, $columns ); $where = self::filter( $request, $columns, $bindings );
$whereResult = self::_flatten( $whereResult ); $whereAll = self::_flatten( $whereAll );
if ( $whereResult ) { $where = $where ? $where .' AND '.$whereResult : 'WHERE '.$whereResult; }
if ( $whereAll ) { $where = $where ? $where .' AND '.$whereAll : 'WHERE '.$whereAll;
$whereAllSql = 'WHERE '.$whereAll; }
// Main query to actually get the data $data = self::sql_exec( $db, $bindings, "SELECT `".implode("`, `", self::pluck($columns, 'db'))."` FROM `$table` $where $order $limit" );
// Data set length after filtering $resFilterLength = self::sql_exec( $db, $bindings, "SELECT COUNT(`{$primaryKey}`) FROM `$table` $where" ); $recordsFiltered = $resFilterLength[0][0];
// Total data set length $resTotalLength = self::sql_exec( $db, $bindings, "SELECT COUNT(`{$primaryKey}`) FROM `$table` ". $whereAllSql ); $recordsTotal = $resTotalLength[0][0];
/* * Output */ return array( "draw" => isset ( $request['draw'] ) ? intval( $request['draw'] ) : 0, "recordsTotal" => intval( $recordsTotal ), "recordsFiltered" => intval( $recordsFiltered ), "data" => self::data_output( $columns, $data ) ); }
/** * Connect to the database * * @param array $sql_details SQL server connection details array, with the * properties: * * host - host name * * db - database name * * user - user name * * pass - user password * @return resource Database connection handle */ static function sql_connect ( $sql_details ) { try { $db = @new PDO( "mysql:host={$sql_details['host']};dbname={$sql_details['db']}", $sql_details['user'], $sql_details['pass'], array( PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION ) ); } catch (PDOException $e) { self::fatal( "An error occurred while connecting to the database. ". "The error reported by the server was: ".$e->getMessage() ); }
return $db; }
/** * Execute an SQL query on the database * * @param resource $db Database handler * @param array $bindings Array of PDO binding values from bind() to be * used for safely escaping strings. Note that this can be given as the * SQL query string if no bindings are required. * @param string $sql SQL query to execute. * @return array Result from the query (all rows) */ static function sql_exec ( $db, $bindings, $sql=null ) { // Argument shifting if ( $sql === null ) { $sql = $bindings; }
$stmt = $db->prepare( $sql ); //echo $sql;
// Bind parameters if ( is_array( $bindings ) ) { for ( $i=0, $ien=count($bindings) ; $i<$ien ; $i ) { $binding = $bindings[$i]; $stmt->bindValue( $binding['key'], $binding['val'], $binding['type'] ); } }
// Execute try { $stmt->execute(); } catch (PDOException $e) { self::fatal( "An SQL error occurred: ".$e->getMessage() ); }
// Return all return $stmt->fetchAll( PDO::FETCH_BOTH ); }
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Internal methods */
/** * Throw a fatal error. * * This writes out an error message in a JSON string which DataTables will * see and show to the user in the browser. * * @param string $msg Message to send to the client */ static function fatal ( $msg ) { echo json_encode( array( "error" => $msg ) );
exit(0); }
/** * Create a PDO binding key which can be used for escaping variables safely * when executing a query with sql_exec() * * @param array &$a Array of bindings * @param * $val Value to bind * @param int $type PDO field type * @return string Bound key to be used in the SQL where this parameter * would be used. */ static function bind ( &$a, $val, $type ) { $key = ':binding_'.count( $a );
$a[] = array( 'key' => $key, 'val' => $val, 'type' => $type );
return $key; }
/** * Pull a particular property from each assoc. array in a numeric array, * returning and array of the property values from each item. * * @param array $a Array to get data from * @param string $prop Property to read * @return array Array of property values */ static function pluck ( $a, $prop ) { $out = array();
for ( $i=0, $len=count($a) ; $i<$len ; $i ) { $out[] = $a[$i][$prop]; }
return $out; }
/** * Return a string from an array or a string * * @param array|string $a Array to join * @param string $join Glue for the concatenation * @return string Joined string */ static function _flatten ( $a, $join = ' AND ' ) { if ( ! $a ) { return ''; } else if ( $a && is_array($a) ) { return implode( $join, $a ); } return $a; } }
เพราะในการใช้จริง มันต้องดึงจาก database แต่เสียดายอย่างเดียว มันใส่ลิ้งในตารางไม่ได้ คือขั้นตอนมันยากอ่ะ มันเป็น jquery
ถ้ามันทำได้นะ มันก็จะลิ้งไปหน้า content ได้ มันก็จะเป็นน้องๆ CMS แถมยังปลอดภัยมากขึ้น ต่อการแฮกอีก น่าสนใจไหมละครับ ใครรู้ทำให้หน่อยสิครับ ขาดแค่ จิ๊กซอตัวสุดท้าย
:'(
หรือ ท่านใดทำได้ คิดราคามาหน่อยครับ ถ้าไม่เเพงเดี๋ยวผมให้สินน้ำใจครับ
:wanwan019:
จริง ๆ ถ้าข้อมูลไม่เยอะ วิธีผมสามารถดึงจากฐานข้อมูลได้นะครับ แล้ววนลูปใน <tbody> แล้วใส่ลิงคืในนั้นได้เลยมันจะง่ายกว่านะครับ แต่มีข้อเสียอย่างที่ท่าน narincr บอกว่ามันต้องดึงข้อมูลมาทั้งหมดซึ่งมันจะเยอะมากกรณีข้อมูลเยอะ
หัวข้อ: Re: เอา Table มาแบ่งหน้า ด้วย Bootstrap Datatable แค่ 2 ขั้นตอน
เริ่มหัวข้อโดย: Fallen ที่ 26 สิงหาคม 2018, 20:43:02
จริง ๆ ถ้าข้อมูลไม่เยอะ วิธีผมสามารถดึงจากฐานข้อมูลได้นะครับ แล้ววนลูปใน <tbody> แล้วใส่ลิงคืในนั้นได้เลยมันจะง่ายกว่านะครับ แต่มีข้อเสียอย่างที่ท่าน narincr บอกว่ามันต้องดึงข้อมูลมาทั้งหมดซึ่งมันจะเยอะมากกรณีข้อมูลเยอะ
โค๊ด 3 ไฟล์ ของผมนี้เป็นการดึงข้อมูลจาก Jquery ผมลองเล่นมาหลายวันแล้ว คำสั่งชุดนี้ มันไม่ได้โหลดมาทีเดียวทุก record ครับ มันจะโหลดมาทีละ 10 ถ้ากดหน้าถัดไป มันจะโหลดอีกหน้า ถ้าย้อนกลับมา มันก็จะโหลดอีก แม้จะเคยกดหน้านั้นแล้ว มันใส่ ลิ้งโต้งๆในนี้ไม่ได้ครับ $columns = array( array( 'db' => 'id_msg','dt' => 0), array( 'db' => 'id', 'dt' => 1 ), array( 'db' => 'id_board', 'dt' => 2 ), array( 'db' => 'subject', 'dt' => 3 ), array( 'db' => 'poster_time', 'dt' => 4 ), array( 'db' => 'modified_time','dt' => 5 ), ); (ต้องใส่ที่ javascript แต่ผมใส่ไม่เป็น) (อีกแบบที่เป็น php แบบนั้นจะโหลดมาทีเดียว ทุก record เลย ผมกำลังตามหา โค๊ดที่จะทำให้มันไม่โหลดทุก record จะใส่ limit 10 ก็จะใช้ ได้แค่นั้น ใช้ไม่ได้) สรุป ตอนนี้ ผมมี 2เวอร์ชั่น ไม่มีอันไหนสมบูรณ์เลย ขาดๆเกินๆอันแรก เป็น เวอร์ชั่น jqurey ใส่ลิ้งไมได้ แต่โหลดเร็ว ไม่โหลดมาทั้งหมด อันสอง เป็น เวอร์ชั่น php ใส่ลิ้งง่าย แต่มันโหลดทีเดียวทุก record ในครั้งแรก (อันสามของท่านเป็น เวอร์ชั่น html) ถ้าท่านทำได้ผมก็อยากจะชมนะครับ อิอิอิ :wanwan017:
หัวข้อ: Re: เอา Table มาแบ่งหน้า ด้วย Bootstrap Datatable แค่ 2 ขั้นตอน
เริ่มหัวข้อโดย: del555 ที่ 27 สิงหาคม 2018, 09:38:19
แบบนี้ข้อเสียคือ
ถ้ามีแบบ 10,000 Record จะเรียกออกมาหมดเลย แล้วค่อยแบ่งหน้า แต่ถ้ามีข้อมูลเกิน 100 แนะนำให้เขียนเพิ่มโดยใช้ Ajax เรียก json data ใช้ Code ต้นแบบเหมือนเดิม แต่เรียกตัวนี้เพิ่มครับ
[url]https://datatables.net/examples/server_side/simple.html[/url]
แบบนี้เรียกว่า Server side ครับ
ตามนี้เลยครับ ระวังเรื่องของ data ที่มีเยอะแบบพวก big data แต่ยังไงก็ขอบคุณมากนะครับ
หัวข้อ: Re: เอา Table มาแบ่งหน้า ด้วย Bootstrap Datatable แค่ 2 ขั้นตอน
เริ่มหัวข้อโดย: narincr ที่ 27 สิงหาคม 2018, 09:55:29
ไม่อยากนะครับ ถ้าเข้าใจเรื่องของ php array อันนี้เป็นของ Microsoft SQL Server ครับ เอาฝั่งของ Server Side มาให้ดูครับ <table id="example2" class="display table-responsive" cellspacing="0" width="100%"> <thead> <tr> <th width="50">ลำดับ</th> <th>วันที่สมัครสมาชิก</th> <th>Username</th> <th>ชื่อ-สกุล</th> <th>เบอร์โทร</th> <th>LineID</th> <th>ธนาคาร</th> <th>เลขที่บัญชี</th> <th>ผู้แนะนำ</th> <th>ยอดเงินสมัคร</th> <th>จัดการ</th> </tr> </thead> </table>
ส่วนของ Javascript <script> $(document).ready(function() { $('#example2').dataTable({ "order": [[ 2, "desc" ]], "bProcessing": true, "bServerSide": true, 'responsive': true, 'iDisplayLength': 25, "lengthMenu": [10, 25, 50, 100, 150, 200, 300, 500, 1000], "sAjaxSource": "post/post_array_from_database.php?action=SEARCH" }).removeClass('display' ).addClass('table table-striped table-bordered'); }); </script>
** บางอย่างผมก็เปลี่ยนนะ ชื่อไฟล์ อะไรพวกนี้ *** $sIndexColumn = "id";
/* DB table to use */ $sTable = "member";
/* Database connection information */ $gaSql['user'] = $DB["username"]; $gaSql['password'] = $DB["password"]; $gaSql['db'] = $DB["database"]; $gaSql['server'] = $DB["host"];
$aColumns = array('id', 'date_regis', 'username', 'fullname', 'mobile', 'line_id', 'bank_code','bank_accno','invite_from_code','money_first'); $connectionInfo = array("UID" => $gaSql['user'], "PWD" => $gaSql['password'], "Database" => $gaSql['db'], "ReturnDatesAsStrings" => true, "CharacterSet" => 'UTF-8'); $gaSql['link'] = sqlsrv_connect($gaSql['server'], $connectionInfo); $params = array(); $options = array("Scrollable" => SQLSRV_CURSOR_KEYSET);
$sOrder = ""; if (isset($_GET['iSortCol_0'])) { $sOrder = "ORDER BY "; for ($i = 0; $i < intval($_GET['iSortingCols']); $i ) { if ($_GET['bSortable_' . intval($_GET['iSortCol_' . $i])] == "true") { $sOrder .= $aColumns[intval($_GET['iSortCol_' . $i])] . " " . addslashes($_GET['sSortDir_' . $i]) . ", "; } } $sOrder = substr_replace($sOrder, "", -2); if ($sOrder == "ORDER BY") { $sOrder = ""; } }
$web_ = $_SESSION["ADMIN"]["WEB"]; /* Filtering */ $sWhere = ""; if (isset($_GET['sSearch']) && $_GET['sSearch'] != "") { $sWhere = "WHERE ctrlcode='0' AND ("; for ($i = 0; $i < count($aColumns); $i ) { $sWhere .= $aColumns[$i] . " LIKE '%" . addslashes($_GET['sSearch']) . "%' OR "; } $sWhere = substr_replace($sWhere, "", -3); $sWhere .= ") and web_='$web_'"; } else { $sWhere = "WHERE ctrlcode='0' and web_='$web_' "; }
/* Individual column filtering */ for ($i = 0; $i < count($aColumns); $i ) { if (isset($_GET['bSearchable_' . $i]) && $_GET['bSearchable_' . $i] == "true" && $_GET['sSearch_' . $i] != '') { if ($sWhere == "") { $sWhere = "WHERE ctrlcode='0' "; } else { $sWhere .= " AND "; } $sWhere .= $aColumns[$i] . " LIKE '%" . addslashes($_GET['sSearch_' . $i]) . "%' "; } }
/* Paging */ $top = (isset($_GET['iDisplayStart'])) ? ((int)$_GET['iDisplayStart']) : 0; $limit = (isset($_GET['iDisplayLength'])) ? ((int)$_GET['iDisplayLength']) : 10; $sQuery = "SELECT TOP $limit " . implode(",", $aColumns) . " FROM $sTable $sWhere " . (($sWhere == "") ? " WHERE " : " AND ") . " $sIndexColumn NOT IN ( SELECT $sIndexColumn FROM ( SELECT TOP $top " . implode(",", $aColumns) . " FROM $sTable $sWhere $sOrder ) as [virtTable] ) $sOrder";
//print $sQuery;
$rResult = sqlsrv_query($gaSql['link'], $sQuery) or die("$sQuery: " . sqlsrv_errors());
$sQueryCnt = "SELECT * FROM $sTable $sWhere"; $rResultCnt = sqlsrv_query($gaSql['link'], $sQueryCnt, $params, $options) or die (" $sQueryCnt: " . sqlsrv_errors()); $iFilteredTotal = sqlsrv_num_rows($rResultCnt);
$sQuery = " SELECT * FROM $sTable "; $rResultTotal = sqlsrv_query($gaSql['link'], $sQuery, $params, $options) or die(sqlsrv_errors()); $iTotal = sqlsrv_num_rows($rResultTotal);
$output = array( "sEcho" => intval($_GET['sEcho']), "iTotalRecords" => $iTotal, "iTotalDisplayRecords" => $iFilteredTotal, "aaData" => array() );
$ADT = new ADT(); while ($aRow = sqlsrv_fetch_array($rResult)) { $row = array(); for ($i = 0; $i < count($aColumns); $i ) { if ($aColumns[$i] != ' ') { $v = $aRow[$aColumns[$i]]; $v = mb_check_encoding($v, 'UTF-8') ? $v : utf8_encode($v); if ($aColumns[$i] == "money_first") { $row[] = "<div align='right'>".number_format($aRow[$aColumns[$i]],0)."</div>"; } else if ($aColumns[$i] == "date_regis") { $row[] = $ADT->Show($aRow[$aColumns[$i]]); } else if ($aColumns[$i] != ' ') { // General output $row[] = $aRow[$aColumns[$i]]; } } } $row[] = ' <a href="#" onclick="view_item(' . $aRow["id"] . ')" role="button" class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-eye-open"></span></a> <a href="#" onclick="edit_item(' . $aRow["id"] . ')" role="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-edit"></span></a> <a href="#" onclick="delete_item(' . $aRow["id"] . ')" role="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove-circle"></span></a> '; If (!empty($row)) { $output['aaData'][] = $row; } } echo json_encode($output);
ส่วนตรงนี้ครับ ที่ผมเพิ่มเข้าไป $row[] = ' <a href="#" onclick="view_item(' . $aRow["id"] . ')" role="button" class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-eye-open"></span></a> <a href="#" onclick="edit_item(' . $aRow["id"] . ')" role="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-edit"></span></a> <a href="#" onclick="delete_item(' . $aRow["id"] . ')" role="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove-circle"></span></a> ';
สงสัยอะไรสอบถามได้ครับ
หัวข้อ: Re: เอา Table มาแบ่งหน้า ด้วย Bootstrap Datatable แค่ 2 ขั้นตอน
เริ่มหัวข้อโดย: Fallen ที่ 27 สิงหาคม 2018, 12:40:19
ไม่อยากนะครับ ถ้าเข้าใจเรื่องของ php array อันนี้เป็นของ Microsoft SQL Server ครับ เอาฝั่งของ Server Side มาให้ดูครับ <table id="example2" class="display table-responsive" cellspacing="0" width="100%"> <thead> <tr> <th width="50">ลำดับ</th> <th>วันที่สมัครสมาชิก</th> <th>Username</th> <th>ชื่อ-สกุล</th> <th>เบอร์โทร</th> <th>LineID</th> <th>ธนาคาร</th> <th>เลขที่บัญชี</th> <th>ผู้แนะนำ</th> <th>ยอดเงินสมัคร</th> <th>จัดการ</th> </tr> </thead> </table>
ส่วนของ Javascript <script> $(document).ready(function() { $('#example2').dataTable({ "order": [[ 2, "desc" ]], "bProcessing": true, "bServerSide": true, 'responsive': true, 'iDisplayLength': 25, "lengthMenu": [10, 25, 50, 100, 150, 200, 300, 500, 1000], "sAjaxSource": "post/post_array_from_database.php?action=SEARCH" }).removeClass('display' ).addClass('table table-striped table-bordered'); }); </script>
** บางอย่างผมก็เปลี่ยนนะ ชื่อไฟล์ อะไรพวกนี้ *** $sIndexColumn = "id";
/* DB table to use */ $sTable = "member";
/* Database connection information */ $gaSql['user'] = $DB["username"]; $gaSql['password'] = $DB["password"]; $gaSql['db'] = $DB["database"]; $gaSql['server'] = $DB["host"];
$aColumns = array('id', 'date_regis', 'username', 'fullname', 'mobile', 'line_id', 'bank_code','bank_accno','invite_from_code','money_first'); $connectionInfo = array("UID" => $gaSql['user'], "PWD" => $gaSql['password'], "Database" => $gaSql['db'], "ReturnDatesAsStrings" => true, "CharacterSet" => 'UTF-8'); $gaSql['link'] = sqlsrv_connect($gaSql['server'], $connectionInfo); $params = array(); $options = array("Scrollable" => SQLSRV_CURSOR_KEYSET);
$sOrder = ""; if (isset($_GET['iSortCol_0'])) { $sOrder = "ORDER BY "; for ($i = 0; $i < intval($_GET['iSortingCols']); $i ) { if ($_GET['bSortable_' . intval($_GET['iSortCol_' . $i])] == "true") { $sOrder .= $aColumns[intval($_GET['iSortCol_' . $i])] . " " . addslashes($_GET['sSortDir_' . $i]) . ", "; } } $sOrder = substr_replace($sOrder, "", -2); if ($sOrder == "ORDER BY") { $sOrder = ""; } }
$web_ = $_SESSION["ADMIN"]["WEB"]; /* Filtering */ $sWhere = ""; if (isset($_GET['sSearch']) && $_GET['sSearch'] != "") { $sWhere = "WHERE ctrlcode='0' AND ("; for ($i = 0; $i < count($aColumns); $i ) { $sWhere .= $aColumns[$i] . " LIKE '%" . addslashes($_GET['sSearch']) . "%' OR "; } $sWhere = substr_replace($sWhere, "", -3); $sWhere .= ") and web_='$web_'"; } else { $sWhere = "WHERE ctrlcode='0' and web_='$web_' "; }
/* Individual column filtering */ for ($i = 0; $i < count($aColumns); $i ) { if (isset($_GET['bSearchable_' . $i]) && $_GET['bSearchable_' . $i] == "true" && $_GET['sSearch_' . $i] != '') { if ($sWhere == "") { $sWhere = "WHERE ctrlcode='0' "; } else { $sWhere .= " AND "; } $sWhere .= $aColumns[$i] . " LIKE '%" . addslashes($_GET['sSearch_' . $i]) . "%' "; } }
/* Paging */ $top = (isset($_GET['iDisplayStart'])) ? ((int)$_GET['iDisplayStart']) : 0; $limit = (isset($_GET['iDisplayLength'])) ? ((int)$_GET['iDisplayLength']) : 10; $sQuery = "SELECT TOP $limit " . implode(",", $aColumns) . " FROM $sTable $sWhere " . (($sWhere == "") ? " WHERE " : " AND ") . " $sIndexColumn NOT IN ( SELECT $sIndexColumn FROM ( SELECT TOP $top " . implode(",", $aColumns) . " FROM $sTable $sWhere $sOrder ) as [virtTable] ) $sOrder";
//print $sQuery;
$rResult = sqlsrv_query($gaSql['link'], $sQuery) or die("$sQuery: " . sqlsrv_errors());
$sQueryCnt = "SELECT * FROM $sTable $sWhere"; $rResultCnt = sqlsrv_query($gaSql['link'], $sQueryCnt, $params, $options) or die (" $sQueryCnt: " . sqlsrv_errors()); $iFilteredTotal = sqlsrv_num_rows($rResultCnt);
$sQuery = " SELECT * FROM $sTable "; $rResultTotal = sqlsrv_query($gaSql['link'], $sQuery, $params, $options) or die(sqlsrv_errors()); $iTotal = sqlsrv_num_rows($rResultTotal);
$output = array( "sEcho" => intval($_GET['sEcho']), "iTotalRecords" => $iTotal, "iTotalDisplayRecords" => $iFilteredTotal, "aaData" => array() );
$ADT = new ADT(); while ($aRow = sqlsrv_fetch_array($rResult)) { $row = array(); for ($i = 0; $i < count($aColumns); $i ) { if ($aColumns[$i] != ' ') { $v = $aRow[$aColumns[$i]]; $v = mb_check_encoding($v, 'UTF-8') ? $v : utf8_encode($v); if ($aColumns[$i] == "money_first") { $row[] = "<div align='right'>".number_format($aRow[$aColumns[$i]],0)."</div>"; } else if ($aColumns[$i] == "date_regis") { $row[] = $ADT->Show($aRow[$aColumns[$i]]); } else if ($aColumns[$i] != ' ') { // General output $row[] = $aRow[$aColumns[$i]]; } } } $row[] = ' <a href="#" onclick="view_item(' . $aRow["id"] . ')" role="button" class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-eye-open"></span></a> <a href="#" onclick="edit_item(' . $aRow["id"] . ')" role="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-edit"></span></a> <a href="#" onclick="delete_item(' . $aRow["id"] . ')" role="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove-circle"></span></a> '; If (!empty($row)) { $output['aaData'][] = $row; } } echo json_encode($output);
ส่วนตรงนี้ครับ ที่ผมเพิ่มเข้าไป $row[] = ' <a href="#" onclick="view_item(' . $aRow["id"] . ')" role="button" class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-eye-open"></span></a> <a href="#" onclick="edit_item(' . $aRow["id"] . ')" role="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-edit"></span></a> <a href="#" onclick="delete_item(' . $aRow["id"] . ')" role="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove-circle"></span></a> ';
สงสัยอะไรสอบถามได้ครับ เนื่องจากผมไม่เชียวชาญ Jquery เลย ผมเทียบ code ของท่าน กับอันเดิมของผม มันจะต่างกันพอสมควร ถามสั้นๆเลยครับ ผมจะเพิ่ม <a href="xxxx">VIEW</a> เข้าไปที่ตำแหน่งไหน? (เพื่อมันจะได้โชว์ ในทุกๆ record ได้) และ ใส่โค๊ดอะไร? หรือ แก้เยอะไหม(ผมจะได้เลิก อิอิ)
ด้านล่างนี้คือ code เดิมของผมindex.php <link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.min.css"> <script src="media/js/jquery.js" type="text/javascript"></script> <script src="media/js/jquery.dataTables.js" type="text/javascript"></script> <script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script> <style media="screen"> .content{ width: 900px; margin:0 auto; padding: 10px; border: 1px solid #999; } </style> </head> <body> <div class="content"> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>First name</th> <th>Last name</th> <th>Position</th> <th>Office</th> <th>Start date</th> <th>Salary</th> </tr> </thead>
</table> </div>
<script type="text/javascript"> $(document).ready(function() { $('#example').DataTable( { "processing": true, "serverSide": true, "ajax": "server_processing.php", } ); } ); </script> server_processing.php<?php $table = 'ชื่อเทเบิ้ล'; $primaryKey = 'id';
//ข้อมูลอะเรที่ส่งไป datables $columns = array( array( 'db' => 'id_msg','dt' => 0), array( 'db' => 'id', 'dt' => 1 ), array( 'db' => 'id_board', 'dt' => 2 ), array( 'db' => 'subject', 'dt' => 3 ), array( 'db' => 'poster_time', 'dt' => 4 ), array( 'db' => 'modified_time','dt' => 5 ), ); $sql_details = array( 'user' => 'ยูสเซอร์', 'pass' => 'พาส', 'db' => 'ชื่อดาต้าเบส', 'host' => 'localhost' ); require( 'ssp.class.php' ); //ส่งข้อมูลกลับไปเป็น JSON echo json_encode( SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns ) );
ssp.class.php<?php
/* * Helper functions for building a DataTables server-side processing SQL query * * The static functions in this class are just helper functions to help build * the SQL used in the DataTables demo server-side processing scripts. These * functions obviously do not represent all that can be done with server-side * processing, they are intentionally simple to show how it works. More complex * server-side processing operations will likely require a custom script. * * See http://datatables.net/usage/server-side for full details on the server- * side processing requirements of DataTables. * * @license MIT - http://datatables.net/license_mit */
class SSP { /** * Create the data output array for the DataTables rows * * @param array $columns Column information array * @param array $data Data from the SQL get * @return array Formatted data in a row based format */ static function data_output ( $columns, $data ) { $out = array();
for ( $i=0, $ien=count($data) ; $i<$ien ; $i ) { $row = array();
for ( $j=0, $jen=count($columns) ; $j<$jen ; $j ) { $column = $columns[$j];
// Is there a formatter? if ( isset( $column['formatter'] ) ) { $row[ $column['dt'] ] = $column['formatter']( $data[$i][ $column['db'] ], $data[$i] ); } else { $row[ $column['dt'] ] = $data[$i][ $columns[$j]['db'] ]; } }
$out[] = $row; }
return $out; }
/** * Database connection * * Obtain an PHP PDO connection from a connection details array * * @param array $conn SQL connection details. The array should have * the following properties * * host - host name * * db - database name * * user - user name * * pass - user password * @return resource PDO connection */ static function db ( $conn ) { if ( is_array( $conn ) ) { return self::sql_connect( $conn ); }
return $conn; }
/** * Paging * * Construct the LIMIT clause for server-side processing SQL query * * @param array $request Data sent to server by DataTables * @param array $columns Column information array * @return string SQL limit clause */ static function limit ( $request, $columns ) { $limit = '';
if ( isset($request['start']) && $request['length'] != -1 ) { $limit = "LIMIT ".intval($request['start']).", ".intval($request['length']); }
return $limit; }
/** * Ordering * * Construct the ORDER BY clause for server-side processing SQL query * * @param array $request Data sent to server by DataTables * @param array $columns Column information array * @return string SQL order by clause */ static function order ( $request, $columns ) { $order = '';
if ( isset($request['order']) && count($request['order']) ) { $orderBy = array(); $dtColumns = self::pluck( $columns, 'dt' );
for ( $i=0, $ien=count($request['order']) ; $i<$ien ; $i ) { // Convert the column index into the column data property $columnIdx = intval($request['order'][$i]['column']); $requestColumn = $request['columns'][$columnIdx];
$columnIdx = array_search( $requestColumn['data'], $dtColumns ); $column = $columns[ $columnIdx ];
if ( $requestColumn['orderable'] == 'true' ) { $dir = $request['order'][$i]['dir'] === 'asc' ? 'ASC' : 'DESC';
$orderBy[] = '`'.$column['db'].'` '.$dir; } }
$order = 'ORDER BY '.implode(', ', $orderBy); }
return $order; }
/** * Searching / Filtering * * Construct the WHERE clause for server-side processing SQL query. * * NOTE this does not match the built-in DataTables filtering which does it * word by word on any field. It's possible to do here performance on large * databases would be very poor * * @param array $request Data sent to server by DataTables * @param array $columns Column information array * @param array $bindings Array of values for PDO bindings, used in the * sql_exec() function * @return string SQL where clause */ static function filter ( $request, $columns, &$bindings ) { $globalSearch = array(); $columnSearch = array(); $dtColumns = self::pluck( $columns, 'dt' );
if ( isset($request['search']) && $request['search']['value'] != '' ) { $str = $request['search']['value'];
for ( $i=0, $ien=count($request['columns']) ; $i<$ien ; $i ) { $requestColumn = $request['columns'][$i]; $columnIdx = array_search( $requestColumn['data'], $dtColumns ); $column = $columns[ $columnIdx ];
if ( $requestColumn['searchable'] == 'true' ) { $binding = self::bind( $bindings, '%'.$str.'%', PDO::PARAM_STR ); $globalSearch[] = "`".$column['db']."` LIKE ".$binding; } } }
// Individual column filtering if ( isset( $request['columns'] ) ) { for ( $i=0, $ien=count($request['columns']) ; $i<$ien ; $i ) { $requestColumn = $request['columns'][$i]; $columnIdx = array_search( $requestColumn['data'], $dtColumns ); $column = $columns[ $columnIdx ];
$str = $requestColumn['search']['value'];
if ( $requestColumn['searchable'] == 'true' && $str != '' ) { $binding = self::bind( $bindings, '%'.$str.'%', PDO::PARAM_STR ); $columnSearch[] = "`".$column['db']."` LIKE ".$binding; } } }
// Combine the filters into a single string $where = '';
if ( count( $globalSearch ) ) { $where = '('.implode(' OR ', $globalSearch).')'; }
if ( count( $columnSearch ) ) { $where = $where === '' ? implode(' AND ', $columnSearch) : $where .' AND '. implode(' AND ', $columnSearch); }
if ( $where !== '' ) { $where = 'WHERE '.$where; }
return $where; }
/** * Perform the SQL queries needed for an server-side processing requested, * utilising the helper functions of this class, limit(), order() and * filter() among others. The returned array is ready to be encoded as JSON * in response to an SSP request, or can be modified if needed before * sending back to the client. * * @param array $request Data sent to server by DataTables * @param array|PDO $conn PDO connection resource or connection parameters array * @param string $table SQL table to query * @param string $primaryKey Primary key of the table * @param array $columns Column information array * @return array Server-side processing response array */ static function simple ( $request, $conn, $table, $primaryKey, $columns ) { $bindings = array(); $db = self::db( $conn );
// Build the SQL query string from the request $limit = self::limit( $request, $columns ); $order = self::order( $request, $columns ); $where = self::filter( $request, $columns, $bindings );
// Main query to actually get the data $data = self::sql_exec( $db, $bindings, "SELECT `".implode("`, `", self::pluck($columns, 'db'))."` FROM `$table` $where $order $limit" );
// Data set length after filtering $resFilterLength = self::sql_exec( $db, $bindings, "SELECT COUNT(`{$primaryKey}`) FROM `$table` $where" ); $recordsFiltered = $resFilterLength[0][0];
// Total data set length $resTotalLength = self::sql_exec( $db, "SELECT COUNT(`{$primaryKey}`) FROM `$table`" ); $recordsTotal = $resTotalLength[0][0];
/* * Output */ return array( "draw" => isset ( $request['draw'] ) ? intval( $request['draw'] ) : 0, "recordsTotal" => intval( $recordsTotal ), "recordsFiltered" => intval( $recordsFiltered ), "data" => self::data_output( $columns, $data ) ); }
/** * The difference between this method and the `simple` one, is that you can * apply additional `where` conditions to the SQL queries. These can be in * one of two forms: * * * 'Result condition' - This is applied to the result set, but not the * overall paging information query - i.e. it will not effect the number * of records that a user sees they can have access to. This should be * used when you want apply a filtering condition that the user has sent. * * 'All condition' - This is applied to all queries that are made and * reduces the number of records that the user can access. This should be * used in conditions where you don't want the user to ever have access to * particular records (for example, restricting by a login id). * * @param array $request Data sent to server by DataTables * @param array|PDO $conn PDO connection resource or connection parameters array * @param string $table SQL table to query * @param string $primaryKey Primary key of the table * @param array $columns Column information array * @param string $whereResult WHERE condition to apply to the result set * @param string $whereAll WHERE condition to apply to all queries * @return array Server-side processing response array */ static function complex ( $request, $conn, $table, $primaryKey, $columns, $whereResult=null, $whereAll=null ) { $bindings = array(); $db = self::db( $conn ); $localWhereResult = array(); $localWhereAll = array(); $whereAllSql = '';
// Build the SQL query string from the request $limit = self::limit( $request, $columns ); $order = self::order( $request, $columns ); $where = self::filter( $request, $columns, $bindings );
$whereResult = self::_flatten( $whereResult ); $whereAll = self::_flatten( $whereAll );
if ( $whereResult ) { $where = $where ? $where .' AND '.$whereResult : 'WHERE '.$whereResult; }
if ( $whereAll ) { $where = $where ? $where .' AND '.$whereAll : 'WHERE '.$whereAll;
$whereAllSql = 'WHERE '.$whereAll; }
// Main query to actually get the data $data = self::sql_exec( $db, $bindings, "SELECT `".implode("`, `", self::pluck($columns, 'db'))."` FROM `$table` $where $order $limit" );
// Data set length after filtering $resFilterLength = self::sql_exec( $db, $bindings, "SELECT COUNT(`{$primaryKey}`) FROM `$table` $where" ); $recordsFiltered = $resFilterLength[0][0];
// Total data set length $resTotalLength = self::sql_exec( $db, $bindings, "SELECT COUNT(`{$primaryKey}`) FROM `$table` ". $whereAllSql ); $recordsTotal = $resTotalLength[0][0];
/* * Output */ return array( "draw" => isset ( $request['draw'] ) ? intval( $request['draw'] ) : 0, "recordsTotal" => intval( $recordsTotal ), "recordsFiltered" => intval( $recordsFiltered ), "data" => self::data_output( $columns, $data ) ); }
/** * Connect to the database * * @param array $sql_details SQL server connection details array, with the * properties: * * host - host name * * db - database name * * user - user name * * pass - user password * @return resource Database connection handle */ static function sql_connect ( $sql_details ) { try { $db = @new PDO( "mysql:host={$sql_details['host']};dbname={$sql_details['db']}", $sql_details['user'], $sql_details['pass'], array( PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION ) ); } catch (PDOException $e) { self::fatal( "An error occurred while connecting to the database. ". "The error reported by the server was: ".$e->getMessage() ); }
return $db; }
/** * Execute an SQL query on the database * * @param resource $db Database handler * @param array $bindings Array of PDO binding values from bind() to be * used for safely escaping strings. Note that this can be given as the * SQL query string if no bindings are required. * @param string $sql SQL query to execute. * @return array Result from the query (all rows) */ static function sql_exec ( $db, $bindings, $sql=null ) { // Argument shifting if ( $sql === null ) { $sql = $bindings; }
$stmt = $db->prepare( $sql ); //echo $sql;
// Bind parameters if ( is_array( $bindings ) ) { for ( $i=0, $ien=count($bindings) ; $i<$ien ; $i ) { $binding = $bindings[$i]; $stmt->bindValue( $binding['key'], $binding['val'], $binding['type'] ); } }
// Execute try { $stmt->execute(); } catch (PDOException $e) { self::fatal( "An SQL error occurred: ".$e->getMessage() ); }
// Return all return $stmt->fetchAll( PDO::FETCH_BOTH ); }
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Internal methods */
/** * Throw a fatal error. * * This writes out an error message in a JSON string which DataTables will * see and show to the user in the browser. * * @param string $msg Message to send to the client */ static function fatal ( $msg ) { echo json_encode( array( "error" => $msg ) );
exit(0); }
/** * Create a PDO binding key which can be used for escaping variables safely * when executing a query with sql_exec() * * @param array &$a Array of bindings * @param * $val Value to bind * @param int $type PDO field type * @return string Bound key to be used in the SQL where this parameter * would be used. */ static function bind ( &$a, $val, $type ) { $key = ':binding_'.count( $a );
$a[] = array( 'key' => $key, 'val' => $val, 'type' => $type );
return $key; }
/** * Pull a particular property from each assoc. array in a numeric array, * returning and array of the property values from each item. * * @param array $a Array to get data from * @param string $prop Property to read * @return array Array of property values */ static function pluck ( $a, $prop ) { $out = array();
for ( $i=0, $len=count($a) ; $i<$len ; $i ) { $out[] = $a[$i][$prop]; }
return $out; }
/** * Return a string from an array or a string * * @param array|string $a Array to join * @param string $join Glue for the concatenation * @return string Joined string */ static function _flatten ( $a, $join = ' AND ' ) { if ( ! $a ) { return ''; } else if ( $a && is_array($a) ) { return implode( $join, $a ); } return $a; } }
หัวข้อ: Re: เอา Table มาแบ่งหน้า ด้วย Bootstrap Datatable แค่ 2 ขั้นตอน
เริ่มหัวข้อโดย: somsaknus ที่ 17 กันยายน 2018, 11:27:17
เข้ามาหาความรู้คับ ขอบคุณมากๆ คับ
|