PlusMagi's Blog By Pitt Phunsanit

plus emotion magic to the knowledge of logic.

Tag Archive grid

  • Home   /  
  • Posts tagged "grid"

DataTable: ดัดแปลง / คัดลอก ข้อมูล

แนวคิดคือ คัดลอกข้อมูลที่เลือกเอาไว้จาก DataTables ตัวหนึ่งไปยังอีกตัวหนึง

[code language=”html” title=”jQuery.DataTables/data.json.transferDataToAnotherTable.html”]<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta name="author" content="Pitt Phunsanit">
<title>DataTables: Transfer Data To Another Table</title>
<link href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../vendor/twbs/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="../vendor/datatables/datatables/media/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../assets/fronteed/icheck/skins/minimal/red.css" rel="stylesheet" type="text/css">
</head>

<body>
<table class="table table-bordered table-hover table-striped" id="filtersTableA" width="100%"></table>
<button class="btn btn-success" id="copyBtn" type="button">Copy Data To Table</button>
<table class="table table-bordered table-hover table-striped" id="tableA" width="100%"></table>
<script src="../vendor/components/jquery/jquery.min.js"></script>
<script src="../vendor/datatables/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="../vendor/datatables/datatables/media/js/dataTables.bootstrap.min.js"></script>
<script src="../assets/fronteed/icheck/icheck.min.js"></script>

<script src="DataTables.js"></script>

<script src="data.json.transferDataToAnotherTable.js"></script>
</body>

</html>[/code]

ส่วนที่เขียนเป็นฟังก์ชั่นกลางไว้ให้ไฟล์อื่นเรียกใช้[code language=”javascript” title=”jQuery.DataTables/DataTables.js”]function iCheckBulk(dataTableArea, dataTableObject) {
dataTableArea.on(‘ifChanged’, ‘.checkAll’, function(event) {

var datas = dataTableObject.data();
var inputs = $(‘input:checkbox, input:radio’, dataTableArea);

if (event.target.checked) {
var enable = ‘1’;
var state = ‘check’;
} else {
var enable = ‘0’;
var state = ‘uncheck’;
}

$.each(datas, function(index, value) {
value.enable = enable;

dataTableObject.row(index).data(value);
});

iCheckInit($(‘input:checkbox, input:radio’, dataTableArea));
});

}

/* change filtersTable data value on input name enables is change */
function iCheckChange(filtersTableArea, filtersTableObject, dataTableObject) {
$(‘tbody’, filtersTableArea).on(‘ifChanged’, ‘input[name="enables[]"]’, function(event) {

event.stopPropagation();

var row = $(this).closest(‘tr’);

var data = filtersTableObject.row(row).data();

if ($(this).is(‘:checked’)) {
$(this).attr(‘checked’, 1);
data.enable = true;
} else {
$(this).attr(‘checked’, 0);
data.enable = false;
}
filtersTableObject.row(row).data(data);

iCheckInit(row);
});
}

function iCheckCopy(dataTableObject, filtersTableObject, pkField) {
$(‘#copyBtn’).click(function() {

/* loop current data (pkField) in current dataTableObject */
var datas = dataTableObject.data();
var hasKeys = new Array();
$.each(datas, function(index, value) {
hasKeys.push(value[pkField]);
});

var datasChoose = filtersTableObject.data();

$.each(datasChoose, function(index, value) {
/* add row to filtersTableObject if input name enables[] is checked */
if (value.enable == true && hasKeys.indexOf(value[pkField]) == -1) {
dataTableObject
.row.add(value)
.draw()
.node();
}
});

});

}

function iCheckInit(selector) {
selector.iCheck({
checkboxClass: ‘icheckbox_minimal-red’,
radioClass: ‘iradio_minimal-red’,
});
}[/code]

ไฟล์ที่ทำหน้าที่ควบคุมการคัดลอกข้อมูล[code language=”javascript” title=”jQuery.DataTables/data.json.transferDataToAnotherTable.js”]$(function() {

dataTableA = $(‘#dataTableA’);
filtersTableA = $(‘#filtersTableA’);
tableA = $(‘#tableA’);

filtersTable = filtersTableA
.DataTable({
"ajax": {
"data": function(parameters) {},
"method": "POST",
"url": "data.json.php",
},
"columns": [{
"orderable": false,
"render": function(data, type, row, meta) {
return parseInt(meta.row) + parseInt(meta.settings._iDisplayStart) + 1;
},
"title": ‘No.’,
"width": "10px",
},
{
"orderable": false,
"render": function(data, type, row, meta) {
if (row.enable == ‘1’) {
var checked = ‘ checked’;
} else {
var checked = ”;
}

return ‘<input’ + checked + ‘ name="enables[]" type="checkbox" value="’ + row.DISTRICT_CODE + ‘">’;
},
"title": ‘<input class="checkAll" type="checkbox">’,
"width": "10px",
},
{
"orderable": false,
"render": function(data, type, row, meta) {
if (row.enable == ‘1’) {
return ‘<span class="glyphicon glyphicon-ok"></span>’;
} else {
return ‘<span class="glyphicon glyphicon-remove"></span>’;
}
},
"title": "Enable",
"width": "10px",
}, {
"data": "DISTRICT_CODE",
"title": "District Code",
"width": "90px",
}, {
"data": "DISTRICT_NAME",
"title": "District Name",
}, {
"data": "PROVINCE_NAME",
"title": "Province Name",
}
],
"processing": true,
"serverSide": true,
"stateSave": true
})
.on(‘draw’, function(event, settings, json, xhr) {
/* add style to checkbox, radio */
iCheckInit($(‘input:checkbox, input:radio’, settings.nTable));
});

iCheckBulk(filtersTableA, filtersTable);

dataTable = tableA
.DataTable({
"columns": [{
"orderable": false,
"render": function(data, type, row, meta) {
return parseInt(meta.row) + parseInt(meta.settings._iDisplayStart) + 1;
},
"title": ‘No.’,
"width": "10px",
},
{
"orderable": false,
"render": function(data, type, row, meta) {
if (row.enable == 1) {
var checked = ‘ checked’;
} else {
var checked = ”;
}

return ‘<input’ + checked + ‘ name="enables[]" type="checkbox" value="’ + row.DISTRICT_CODE + ‘">’;
},
"title": ‘<input class="checkAll" type="checkbox">’,
"width": "10px",
},
{
"orderable": false,
"render": function(data, type, row, meta) {
if (row.enable) {
return ‘<span class="glyphicon glyphicon-ok"></span>’;
} else {
return ‘<span class="glyphicon glyphicon-remove"></span>’;
}
},
"title": "Enable",
"width": "10px",
}, {
"data": "DISTRICT_CODE",
"title": "District Code",
"width": "90px",
}, {
"data": "DISTRICT_NAME",
"title": "District Name",
}, {
"data": "PROVINCE_NAME",
"title": "Province Name",
}
]
})
.on(‘draw’, function(event, settings, json, xhr) {
/* add style to checkbox, radio */
iCheckInit($(‘input:checkbox, input:radio’, settings.nTable));
});

iCheckBulk(tableA, dataTable);

iCheckChange(filtersTableA, filtersTable, dataTable);

iCheckCopy(dataTable, filtersTable, ‘DISTRICT_CODE’);

});[/code]

อธิบาย

  • มี 2 ตารางคือ id=”filtersTableA” เป็นต้นฉบับ และ id=”tableA” เป็นตารางที่จะรับค่าที่จะคัดลอก
  • เพราะว่าอาจจะแบ่งข้อมูลไว้หลายหน้าและ DataTable จะ render ที่ละหน้าเท่านั้น ถ้า user เลือกรายการโดยใช้ input enables[] แล้วเปลี่ยนไปหน้าอื่น input นั้นจะหายไป ทำให้ต้องใช้วิธี update กลับไปที่ Data ของตัว DataTable filtersTableA โดยเปลี่ยนค่าใน object data เช่น data.enable = true; หรือ data.enable = false;
  • เมือคลิก ปุ่ม id=”copyBtn” ให้คัดลอกข้อมูล เพื่อป้องกันการเก็บข้อมูลซ้ำจึงต้อง ดึงรายการที่เก็บข้อมูลเอาไว้แล้ว มาเทียบว่าที่จะเข้ามาใหม่มีรึยังโดยใช้ primary key คือ DISTRICT_CODE

อ่านเพิ่มเติม

DataTable: การค้นหาชั้นสูง

เราสามารถเพิ่มเงื่อนไขให้ DataTables ใช้ในการค้นหาได้ โดยส่วนที่เปลี่ยนไปจากเดิมคือใช้ “beforeSend” ในการรวมข้อมูลจาก form (formA) และเขียน validation ง่ายๆ โดยบังคับว่าถ้า advanceSearch ถูกติ๊กอยู่จะต้องเลือก geo_id ด้วย (จริงๆคือ ถึงไม่ติ๊ก advanceSearch ก็ใช้ geo_id search ได้เหมือนกัน)

[code language=”html” title=”jQuery.DataTables/data.json.external.search.html”]<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta name="author" content="Pitt Phunsanit">
<title>DataTables: external.search</title>
<link href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../vendor/twbs/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="../vendor/datatables/datatables/media/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css">
</head>

<body>
<form action="DataTables.json.php" class="form-inline" id="formA" method="post">
<div class="form-group">
<input name="advanceSearch" type="checkbox">
<label for="advanceSearch">advance Search</label>
</div>
<div class="form-group">
<label for="geo_id">ภูมิภาค:</label>
<select class="form-control" name="geo_id">
<option selected="selected" value="">— Select —</option>
<option value="1">ภาคเหนือ</option>
<option value="2">ภาคกลาง</option>
<option value="3">ภาคตะวันออกเฉียงเหนือ</option>
<option value="4">ภาคตะวันตก</option>
<option value="5">ภาคตะวันออก</option>
<option value="6">ภาคใต้</option>
</select>
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<table class="table table-bordered table-hover table-striped" id="tableA" width="100%"></table>
<script src="../vendor/components/jquery/jquery.min.js"></script>
<script src="../vendor/datatables/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="../vendor/datatables/datatables/media/js/dataTables.bootstrap.min.js"></script>
<script src="data.json.external.search.js"></script>
</body>

</html>[/code][code language=”javascript” title=”jQuery.DataTables/data.json.external.search.js”]$(function() {

formA = $(‘#formA’);
tableA = $(‘#tableA’);

datatable = tableA.DataTable({
"ajax": {
"beforeSend": function(jqXHR, settings) {
/* add value form from to DataTable params */
settings.data = formA.serialize() + ‘&’ + settings.data;

/* validation */
var params = new URLSearchParams(settings.data);

/* user must selected region if enable advance search */
if (params.get(‘advanceSearch’) == ‘on’ && params.get(‘geo_id’) == ”) {
jqXHR.abort();
alert(‘กรุณาเลือกภูมิภาค’);
return false;
}

return true;
},
"dataSrc": function(json) {
alert(‘data back ‘ + json.data.length + ‘ items’);

return json.data;
},
"method": "POST",
"url": "data.json.php",
},
"columns": [{
"orderable": false,
"render": function(data, type, row, meta) {
return parseInt(meta.row) + parseInt(meta.settings._iDisplayStart) + 1;
},
"title": ‘No.’,
"width": "10px",
},
{
"orderable": false,
"render": function(data, type, row, meta) {
return ‘<input type="checkbox" value="’ + row.DISTRICT_CODE + ‘">’;
},
"title": ‘<input class="checkAll" type="checkbox">’,
"width": "10px",
},
{
"orderable": false,
"render": function(data, type, row, meta) {
if (row.enable == ‘1’) {
return ‘<span class="glyphicon glyphicon-ok"></span>’;
} else {
return ‘<span class="glyphicon glyphicon-remove"></span>’;
}
},
"title": "Enable",
"width": "10px",
}, {
"data": "DISTRICT_CODE",
"title": "District Code",
"width": "90px",
}, {
"data": "DISTRICT_NAME",
"title": "District Name",
}, {
"data": "PROVINCE_NAME",
"title": "Province Name",
}
],
/* default sort */
"order": [
[3, "asc"],
[4, "asc"],
],
"processing": true,
"serverSide": true,
"stateSave": true,
});

$(‘.checkAll’, tableA).click(function() {
$(‘input:checkbox’, tableA).not(this).prop(‘checked’, this.checked);
});

formA.submit(function(event) {
event.preventDefault();

datatable.ajax.reload();
});

});[/code]

  • ข้อมูลจากฟอร์ม [code language=”html”]id="formA"[/code] จะถูกรวมกับ data ที่ DataTable สร้างขึ้นมาเองโดย[code language=”javascript” title=”beforeSend”]"beforeSend": function(jqXHR, settings) {
    settings.data = formA.serialize() + ‘&’ + settings.data;
    },[/code]
  • สามารถทำ validation data ก่อนส่งข้อมูลออกไป ถ้าต้องการหยุดการทำงาน ก็ให้ใช้[code language=”javascript” title=”beforeSend”]"beforeSend": function(jqXHR, settings) {
    jqXHR.abort();
    },[/code]ไม่ให้ส่งข้อมูลกลับไป server อาจจะดัดแปลงให้ datatable ไม่ขอข้อมูลจาก server กรณีที่ไม่มีการเลือกตัว filter ก็ได้เช่นกัน
  • หลังได้ข้อมูลกลับมายังสามารถใช้[code language=”javascript” title=”dataSrc / success”]"dataSrc": function(json) {
    alert(‘data back ‘ + json.data.length + ‘ items’);

    return json.data;
    },[/code]แก้ไขข้อมูลก่อนแสดงผลได้ แต่ไม่ใช่ “success” เหมือนใน jQuery ajax ตามปกตินะครับ เพราะจะทำให้ DataTable มันทำงานผิดปกติได้เลย

  • ถ้าต้องการให้ DataTable ดึงข้อมูลใหม่ให้ใช้รูปแบบ[code language=”javascript” title=”refresh datatable”]datatable.ajax.reload();[/code]

[code language=”php” title=”jQuery.DataTables/data.json.php”]<?php
/* https://datatables.net/manual/server-side */

$output = [
‘data’ => [],
‘debug’ => [
‘length’ => $_REQUEST[‘length’],
‘post’ => $_REQUEST,
‘sqlCount’ => ”,
‘sqlResult’ => ”,
‘start’ => $_REQUEST[‘start’],
],
‘draw’ => $_REQUEST[‘draw’],
‘recordsFiltered’ => $_REQUEST[‘length’],
‘recordsTotal’ => 0,
];

$dns = new PDO(‘mysql:host=localhost;dbname=snippets’, ‘root’, ”, [
//PDO::ATTR_EMULATE_PREPARES => false,
PDO::MYSQL_ATTR_INIT_COMMAND => ‘SET NAMES utf8’,
]);

$condition = [];
$from = ‘ FROM district AS d LEFT JOIN province AS p ON d.PROVINCE_ID = p.PROVINCE_ID’;
$parameters = [];
$where = ”;

if (isset($_REQUEST[‘filters’]) || isset($_REQUEST[‘search’][‘value’])) {

if (isset($_REQUEST[‘search’][‘value’])) {
if ($_REQUEST[‘search’][‘value’] != ”) {

$parameter = ‘:d_DISTRICT_NAME’;

$parameters[$parameter] = ‘%’ . $_REQUEST[‘search’][‘value’] . ‘%’;
array_push($condition, ‘d.DISTRICT_NAME LIKE ‘ . $parameter);
}
}

if (isset($_REQUEST[‘filters’])) {
foreach ($_REQUEST[‘filters’] as $tableAlias => $filter) {
foreach ($filter as $field => $value) {
if ($value != ”) {
$parameter = ‘:’ . $tableAlias . ‘_’ . $field;

$parameters[$parameter] = ‘%’ . $value . ‘%’;
array_push($condition, $tableAlias . ‘.’ . $field . ‘ LIKE ‘ . $parameter);
}
}
}
}

}

if (isset($_REQUEST[‘geo_id’]) && $_REQUEST[‘geo_id’] != ”) {
$parameter = ‘:d_geo_id’;

$parameters[$parameter] = $_REQUEST[‘geo_id’];
array_push($condition, ‘d.GEO_ID = ‘ . $parameter);
}

if (count($parameters)) {
$where = ‘ WHERE ‘ . implode("\n\t AND ", $condition);
}

if (isset($_REQUEST[‘order’]) && isset($_REQUEST[‘order’][0])) {
$columns = [
0 => ‘DISTRICT_NAME’,
3 => ‘DISTRICT_CODE’,
4 => ‘DISTRICT_NAME’,
5 => ‘PROVINCE_NAME’,
];

$order = ‘ ORDER BY ‘ . $columns[$_REQUEST[‘order’][0][‘column’]] . ‘ ‘ . strtoupper($_REQUEST[‘order’][0][‘dir’]);
} else {
$order = ‘ ORDER BY DISTRICT_NAME ASC’;
}

$output[‘debug’][‘parameters’] = $parameters;

/* Total records, before filtering */
$sql = ‘SELECT COUNT(d.DISTRICT_ID)’ . $from;
try {
$output[‘debug’][‘sqlCount’] = $sql;
$stmt = $dns->prepare($sql);
$stmt->execute($parameters);
$output[‘recordsTotal’] = (int) $stmt->fetchColumn(0);
} catch (PDOException $e) {
exit($e->getMessage());
}

/* Total records, after filtering */
$sql = ‘SELECT COUNT(d.DISTRICT_ID)’ . $from . $where;
try {
$output[‘debug’][‘sqlCount’] = $sql;
$stmt = $dns->prepare($sql);
$stmt->execute($parameters);
$output[‘recordsFiltered’] = (int) $stmt->fetchColumn(0);
} catch (PDOException $e) {
exit($e->getMessage());
}

/* data */
if ($output[‘recordsTotal’] > 0) {
$sql = ‘SELECT d.enable, d.DISTRICT_ID, d.DISTRICT_CODE, d.DISTRICT_NAME, p.PROVINCE_NAME’ . $from . $where . $order . " LIMIT " . $_REQUEST[‘start’] . ", " . $_REQUEST[‘length’] . ";";

try {
$output[‘debug’][‘sqlResult’] = $sql;
$stmt = $dns->prepare($sql);
$stmt->execute($parameters);
$output[‘data’] = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
exit($e->getMessage());
}
}

/* unset debug for security */
unset($output[‘debug’]);

header(‘Content-type: application/json; charset=utf-8’);
echo json_encode($output);[/code]

อ่านเพิ่มเติม

DataTable: ทำ ajax data grid table

DataTables เป็น grid ที่สามารถให้ฟรีได้โดยไม่มีเงื่อนไขจริงๆ การใช้ก็ไม่ยุ่งยากจนเกินไป

[code language=”html” title=”jQuery.DataTables/data.json.html”]<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta name="author" content="Pitt Phunsanit">
<title>DataTables: datas from ajax</title>
<link href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../vendor/twbs/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="../vendor/datatables/datatables/media/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css">
</head>

<body>
<table class="table table-bordered table-hover table-striped" id="tableA" width="100%"></table>
<script src="../vendor/components/jquery/jquery.min.js"></script>
<script src="../vendor/datatables/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="../vendor/datatables/datatables/media/js/dataTables.bootstrap.min.js"></script>
<script src="data.json.js"></script>
</body>

</html>[/code][code language=”javascript” title=”jQuery.DataTables/data.json.js”]$(function() {

tableA = $(‘#tableA’);

datatable = tableA.DataTable({
"ajax": {
"data": function(parameters) {},
"method": "POST",
"url": "data.json.php",
},
"columns": [{
"orderable": false,
"render": function(data, type, row, meta) {
return parseInt(meta.row) + parseInt(meta.settings._iDisplayStart) + 1;
},
"title": ‘No.’,
"width": "10px",
},
{
"orderable": false,
"render": function(data, type, row, meta) {
return ‘<input type="checkbox" value="’ + row.DISTRICT_CODE + ‘">’;
},
"title": ‘<input class="checkAll" type="checkbox">’,
"width": "10px",
},
{
"orderable": false,
"render": function(data, type, row, meta) {
if (row.enable == ‘1’) {
return ‘<span class="glyphicon glyphicon-ok"></span>’;
} else {
return ‘<span class="glyphicon glyphicon-remove"></span>’;
}
},
"title": "Enable",
"width": "10px",
}, {
"data": "DISTRICT_CODE",
"title": "District Code",
"width": "90px",
}, {
"data": "DISTRICT_NAME",
"title": "District Name",
}, {
"data": "PROVINCE_NAME",
"title": "Province Name",
}
],
/* default sort */
"order": [
[3, "asc"],
[4, "asc"],
],
"processing": true,
"serverSide": true,
"stateSave": true,
});

$(‘.checkAll’, tableA).click(function() {
$(‘input:checkbox’, tableA).not(this).prop(‘checked’, this.checked);
});

});[/code][code language=”php” title=”jQuery.DataTables/data.json.php”]<?php
/* https://datatables.net/manual/server-side */

$output = [
‘data’ => [],
‘debug’ => [
‘length’ => $_REQUEST[‘length’],
‘post’ => $_REQUEST,
‘sqlCount’ => ”,
‘sqlResult’ => ”,
‘start’ => $_REQUEST[‘start’],
],
‘draw’ => $_REQUEST[‘draw’],
‘recordsFiltered’ => $_REQUEST[‘length’],
‘recordsTotal’ => 0,
];

$dns = new PDO(‘mysql:host=localhost;dbname=snippets’, ‘root’, ”, [
//PDO::ATTR_EMULATE_PREPARES => false,
PDO::MYSQL_ATTR_INIT_COMMAND => ‘SET NAMES utf8’,
]);

$condition = [];
$from = ‘ FROM district AS d LEFT JOIN province AS p ON d.PROVINCE_ID = p.PROVINCE_ID’;
$parameters = [];
$where = ”;

if (isset($_REQUEST[‘filters’]) || isset($_REQUEST[‘search’][‘value’])) {

if (isset($_REQUEST[‘search’][‘value’])) {
if ($_REQUEST[‘search’][‘value’] != ”) {

$parameter = ‘:d_DISTRICT_NAME’;

$parameters[$parameter] = ‘%’ . $_REQUEST[‘search’][‘value’] . ‘%’;
array_push($condition, ‘d.DISTRICT_NAME LIKE ‘ . $parameter);
}
}

if (isset($_REQUEST[‘filters’])) {
foreach ($_REQUEST[‘filters’] as $tableAlias => $filter) {
foreach ($filter as $field => $value) {
if ($value != ”) {
$parameter = ‘:’ . $tableAlias . ‘_’ . $field;

$parameters[$parameter] = ‘%’ . $value . ‘%’;
array_push($condition, $tableAlias . ‘.’ . $field . ‘ LIKE ‘ . $parameter);
}
}
}
}

}

if (isset($_REQUEST[‘geo_id’]) && $_REQUEST[‘geo_id’] != ”) {
$parameter = ‘:d_geo_id’;

$parameters[$parameter] = $_REQUEST[‘geo_id’];
array_push($condition, ‘d.GEO_ID = ‘ . $parameter);
}

if (count($parameters)) {
$where = ‘ WHERE ‘ . implode("\n\t AND ", $condition);
}

if (isset($_REQUEST[‘order’]) && isset($_REQUEST[‘order’][0])) {
$columns = [
0 => ‘DISTRICT_NAME’,
3 => ‘DISTRICT_CODE’,
4 => ‘DISTRICT_NAME’,
5 => ‘PROVINCE_NAME’,
];

$order = ‘ ORDER BY ‘ . $columns[$_REQUEST[‘order’][0][‘column’]] . ‘ ‘ . strtoupper($_REQUEST[‘order’][0][‘dir’]);
} else {
$order = ‘ ORDER BY DISTRICT_NAME ASC’;
}

$output[‘debug’][‘parameters’] = $parameters;

/* Total records, before filtering */
$sql = ‘SELECT COUNT(d.DISTRICT_ID)’ . $from;
try {
$output[‘debug’][‘sqlCount’] = $sql;
$stmt = $dns->prepare($sql);
$stmt->execute($parameters);
$output[‘recordsTotal’] = (int) $stmt->fetchColumn(0);
} catch (PDOException $e) {
exit($e->getMessage());
}

/* Total records, after filtering */
$sql = ‘SELECT COUNT(d.DISTRICT_ID)’ . $from . $where;
try {
$output[‘debug’][‘sqlCount’] = $sql;
$stmt = $dns->prepare($sql);
$stmt->execute($parameters);
$output[‘recordsFiltered’] = (int) $stmt->fetchColumn(0);
} catch (PDOException $e) {
exit($e->getMessage());
}

/* data */
if ($output[‘recordsTotal’] > 0) {
$sql = ‘SELECT d.enable, d.DISTRICT_ID, d.DISTRICT_CODE, d.DISTRICT_NAME, p.PROVINCE_NAME’ . $from . $where . $order . " LIMIT " . $_REQUEST[‘start’] . ", " . $_REQUEST[‘length’] . ";";

try {
$output[‘debug’][‘sqlResult’] = $sql;
$stmt = $dns->prepare($sql);
$stmt->execute($parameters);
$output[‘data’] = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
exit($e->getMessage());
}
}

/* unset debug for security */
unset($output[‘debug’]);

header(‘Content-type: application/json; charset=utf-8’);
echo json_encode($output);[/code]json ที่ส่งกลับมาที่สำคัญคือ

data

เป็นข้อมูลที่นำมาสร้างเป้นตัว body ใน table หรือคือ data ที่ต้องการนำมาแสดง
draw
เป็นรหัสอ้างอิงให้ DataTable รู้ว่า json ที่ส่งมาอันไหนใหม่กว่า จะเรียกว่าเป็นเลข version ของข้อมูลก็ได้
recordsFiltered
เป็นจำนวนชุดข้อมูลทั้งหมดที่ query ได้ (ไม่ใช่จำนวนจริงๆ ที่ return กลับมา เช่น query ได้ข้อมูลทั้งหมด 8,880 รายการ แต่ทำ paging ดึงข้อมูล data มาแค่ครั้งละ 10, 20, 50 และ 100 รายการ)
recordsTotal
เป็นจำนวนข้อมูลทั้งหมดที่มีใน table โดยที่ยังไม่ใส่เงื่อนไข query ซึ่งจริงๆแล้วคัดลอกค่ามากจาก recordsTotal ไปเลยก็ได้ จะได้ไม่เสียเวลา query

อ่านเพิ่มเติม

สร้าง grid ใน laravel แบบ advance

การใช้ Nayjest Grids แบบ advance เพื่อที่จะสามารถค้นหา filter ข้อมูล, export ไฟล์ ออกมาในรูปแบบ .csv และ excel ได้

ติดตั้งโดย

  1. เปิดไฟล์ composer.json เพิ่ม[code language=”php” title=”composer.json”]
    …
    "laravelcollective/html": "^5",
    "maatwebsite/excel": "~2.1.0",
    "nayjest/grids": "^1.3.1"
    …
    [/code]
  2. Command[code language=”text”]composer update[/code]
  3. เปิดไฟล์ \config\app.php เพิ่ม [code language=”php” title=”configpp.php”]
    ‘providers’ => [
    …
    ‘Collective&#92;Html&#92;HtmlServiceProvider’,
    ‘Maatwebsite&#92;Excel&#92;ExcelServiceProvider’,
    ‘Nayjest&#92;Grids&#92;ServiceProvider’,
    …

    ‘aliases’ => [
    …
    ‘Excel’ => ‘Maatwebsite&#92;Excel&#92;Facades&#92;Excel’,
    ‘Form’ => ‘Collective&#92;Html&#92;FormFacade’,
    ‘Grids’ => ‘Nayjest&#92;Grids&#92;Grids’,
    ‘HTML’ => ‘Collective&#92;Html&#92;HtmlFacade’,
    ‘Input’ => ‘Illuminate&#92;Support&#92;Facades&#92;Input’,
    …
    ][/code]

สร้าง grid โดย

  1. [code language=”php” title=”\app\Http\Controllers\UsersController.php”]
    <?php

    namespace App\Http\Controllers;

    use App\user;
    use HTML;
    use Nayjest\Grids\Components\Base\RenderableRegistry;
    use Nayjest\Grids\Components\ColumnHeadersRow;
    use Nayjest\Grids\Components\ColumnsHider;
    use Nayjest\Grids\Components\CsvExport;
    use Nayjest\Grids\Components\ExcelExport;
    use Nayjest\Grids\Components\FiltersRow;
    use Nayjest\Grids\Components\Filters\DateRangePicker;
    use Nayjest\Grids\Components\HtmlTag;
    use Nayjest\Grids\Components\Laravel5\Pager;
    use Nayjest\Grids\Components\OneCellRow;
    use Nayjest\Grids\Components\RecordsPerPage;
    use Nayjest\Grids\Components\RenderFunc;
    use Nayjest\Grids\Components\ShowingRecords;
    use Nayjest\Grids\Components\TFoot;
    use Nayjest\Grids\Components\THead;
    use Nayjest\Grids\EloquentDataProvider;
    use Nayjest\Grids\FieldConfig;
    use Nayjest\Grids\FilterConfig;
    use Nayjest\Grids\Grid;
    use Nayjest\Grids\GridConfig;

    class UsersController extends Controller
    {

    public function Index()
    {

    $query = (new User)
    ->query();

    $grid = new Grid(
    (new GridConfig)
    ->setDataProvider(
    new EloquentDataProvider($query)
    )
    ->setName(‘UserIndex’) /* grid unque id */
    ->setPageSize(20)
    ->setColumns([
    (new FieldConfig)
    ->addFilter(
    (new FilterConfig)
    ->setOperator(FilterConfig::OPERATOR_LIKE)
    )
    ->setLabel(‘ID’)
    ->setName(‘id’) /* field */
    ->setSortable(true)
    ->setSorting(Grid::SORT_DESC)
    ,
    (new FieldConfig)
    ->addFilter(
    (new FilterConfig)
    ->setOperator(FilterConfig::OPERATOR_LIKE)
    )
    ->setLabel(‘Name’)
    ->setName(‘name’)
    ->setSortable(true)
    ,
    (new FieldConfig)
    ->addFilter(
    (new FilterConfig)
    ->setOperator(FilterConfig::OPERATOR_LIKE)
    )
    ->setLabel(‘Email’)
    ->setName(’email’)
    ->setSortable(true)
    ,
    (new FieldConfig)
    ->addFilter(
    (new FilterConfig)
    ->setOperator(FilterConfig::OPERATOR_LIKE)
    )
    ->setLabel(‘Update Information’)
    ->setName(‘count_update’)
    ->setSortable(true)
    ,
    (new FieldConfig)
    ->setLabel(‘Created’)
    ->setName(‘created_at’)
    ->setSortable(true)
    ,
    (new FieldConfig)
    ->setLabel(‘Last Update’)
    ->setName(‘updated_at’)
    ->setSortable(true),
    ])
    ->setComponents([
    (new THead)
    ->setComponents([
    (new ColumnHeadersRow),
    (new FiltersRow)
    ->addComponents([
    (new RenderFunc(function () {
    return HTML::style(‘js/daterangepicker/daterangepicker-bs3.css’)
    . HTML::script(‘js/moment/moment-with-locales.js’)
    . HTML::script(‘js/daterangepicker/daterangepicker.js’)
    . "<style>
    .daterangepicker td.available.active,
    .daterangepicker li.active,
    .daterangepicker li:hover {
    color:black !important;
    font-weight: bold;
    }
    </style>";
    }))
    ->setRenderSection(‘filters_row_column_created_at’),
    (new DateRangePicker)
    ->setName(‘created_at’)
    ->setRenderSection(‘filters_row_column_created_at’)
    ->setDefaultValue([‘1990-01-01’, date(‘Y-m-d H:i:s’)]),
    (new DateRangePicker)
    ->setName(‘created_at’)
    ->setRenderSection(‘filters_row_column_updated_at’)
    ->setDefaultValue([‘1990-01-01’, date(‘Y-m-d H:i:s’)]),
    ])
    ,
    (new OneCellRow)
    ->setRenderSection(RenderableRegistry::SECTION_END)
    ->setComponents([
    new RecordsPerPage,
    new ColumnsHider,
    (new CsvExport)
    ->setFileName(‘usersExport_’ . date(‘Y-m-d’))
    ,
    (new ExcelExport())
    ->setFileName(‘usersExport_’ . date(‘Y-m-d’))
    ,
    (new HtmlTag)
    ->setContent(‘<span class="glyphicon glyphicon-refresh"></span> Filter’)
    ->setTagName(‘button’)
    ->setRenderSection(RenderableRegistry::SECTION_END)
    ->setAttributes([
    ‘class’ => ‘btn btn-success btn-sm’,
    ]),
    ]),
    ])
    ,
    (new TFoot)
    ->setComponents([
    (new OneCellRow)
    ->setComponents([
    new Pager,
    (new HtmlTag)
    ->setAttributes([‘class’ => ‘pull-right’])
    ->addComponent(new ShowingRecords)
    ,
    ]),
    ])
    ,
    ])
    );
    $grid = $grid->render();

    return view(‘users.index’, [
    ‘grid’ => $grid,
    ]);
    }

    }
    [/code]

  2. สร้าง view \resources\views\users\index.blade.php[code language=”php” title=”\resources\views\users\index.blade.php”]@extends(‘layouts.app’)

    @section(‘title’, ‘Users’)

    @section(‘main-content’) <a href="{{ url(‘/excels/form’) }}">
    <button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-upload"></span> Import Datas</button>
    </a> @if(!empty($text))
    <div class="container">{!! $text !!}</div>
    @endif
    <?=$grid;?>
    @stop[/code]

  3. สร้าง route โดยไปที่ \app\Http\routes.php[code language=”php” title=”\app\Http\routes.php”]
    …
    Route::get(‘/users/index’, ‘[email protected]’);
    …[/code]

ทดลองโดยเรียก /users/index ในเครื่องผมคือ http://localhost/laravel52/public/users/index grid แสดงข้อมูลออกมาแล้วแต่ จะส่งออกเป็นไฟล์ csv หรือ excel ยังไงละ ใจเย็นๆครับ อ่าน สร้าง grid ใน laravel แบบ advance ครับ

สร้าง grid ใน laravel

ตัว laravel จะไม่มี grid ติดตั้งมาให้ในตัวครับ ถ้าจะใช้ต้องลงเอง ผมเลือกใช้ คือ Nayjest Grids เพราะว่าใช้ bootstrapt เป็นพื้นฐานใช้งานง่าย ไม่ยากจนเกินไป สามารถส่งออกเป็นไฟล์ .csv และ excel ได้ ถึงจะไม่ได้เป็นแบบ ajax แต่เจ้าของโครงการก็ประกาศว่าจะทำ และดูจากการ update แล้วถือว่าถี่มากคงอีกไม่นานก็ได้ใช้

ติดตั้งโดย

  1. เปิดไฟล์ composer.json เพิ่ม[code language=”php” title=”composer.json”]
    …
    "laravelcollective/html": "^5",
    "nayjest/grids": "^1.3.1"
    …
    [/code]
  2. Command[code language=”text”]composer update[/code]
  3. เปิดไฟล์ \config\app.php เพิ่ม [code language=”php” title=”\config\app.php”]
    ‘providers’ => [
    …
    ‘Collective&#92;Html&#92;HtmlServiceProvider’,
    ‘Nayjest&#92;Grids&#92;ServiceProvider’,
    …

    ‘aliases’ => [
    …
    ‘Form’ => ‘Collective&#92;Html&#92;FormFacade’,
    ‘Grids’ => ‘Nayjest&#92;Grids&#92;Grids’,
    ‘HTML’ => ‘Collective&#92;Html&#92;HtmlFacade’,
    ‘Input’ => ‘Illuminate&#92;Support&#92;Facades&#92;Input’,
    …
    ][/code]

สร้าง grid โดย

  1. [code language=”php” title=”\app\Http\Controllers\UsersController.php”]
    <?php

    namespace App&#92;Http&#92;Controllers;

    use App&#92;Http&#92;Controllers&#92;Controller;
    use Grids;

    class UsersController extends Controller
    {
    public function index()
    {
    $grid = [
    ‘src’ => ‘App&#92;User’,
    ‘columns’ => [
    ‘id’,
    ‘name’,
    ’email’,
    ‘created_at’,
    ‘updated_at’,
    ],
    ];
    echo Grids::make($grid);
    }

    }
    [/code]

  2. สร้าง route โดยไปที่ \app\Http\routes.php[code language=”php” title=”\app\Http\routes.php”]
    …
    Route::get(‘/users/index’, ‘[email protected]’);
    …[/code]

ทดลองโดยเรียก /users/index ในเครื่องผมคือ http://localhost/laravel52/public/users/index grid แสดงข้อมูลออกมาแล้วแต่ จะส่งออกเป็นไฟล์ csv หรือ excel ยังไงละ ใจเย็นๆครับ อ่าน สร้าง grid ใน laravel แบบ advance ครับ

YII2 GRUD GRID FROM หลายภาษา

จากเรื่องที่แล้ว ทำตาราง yii 2 ให้เก็บหลายภาษา โดยเราสามารถอ้างถึง attribute ตามรูปแบบ {attribute name}_{language} เช่น ในตาราง _lang ฟิลย์ชื่อ name ก็ใช้ $model->name_en, $model->name_jp, $model->name_th ในวิวถ้าต้องการแสดงผล

ในบทความที่ยังขาดตัวอย่างในการแสดงข้อมูล การใช้ในกริดที่แสดงรายการทั้งหมด, ฟอร์มที่จะกรอกข้อมูล และวิวที่จะแสดงสิ่งที่เราเก็บเอาไว้ออกมา ตัวอย่าง code ที่ผมใช้

GridView ต้องการให้แสดงภาษาอังกฤษเป็นหลัก อีกช่องที่เหลือแสดงสลับกันระหว่างภาษาไทย และญี่ปุ่น ทำได้โดยแทนที่จะอ้าง name_th หรือ name_jp ตรงๆ ก็อ้างผ่านตัวแปรไปแทน [code lang=”php” title=”index.php”]
…

if(Yii::$app->language == ‘jp’)
{
$name = ‘name_jp’;
}
else
{
$name = ‘name_th’;
}
…
echo GridView::widget([
‘dataProvider’ => $dataProvider,
‘filterModel’ => $searchModel,
‘columns’ => [
[‘class’ => ‘yii\grid\SerialColumn’],
…
‘name_en’,
$name,
…
‘post_id’,
‘status’,
],
]);
…
[/code]

form ก็สามารถใช้เหมือนรูบแบบปกติได้เลย โดยเราสามารถกรอกข้อมูล แก้ไขตัวแปลภาษาทั้งหมดได้พร้อมกันในครั้งเดียว เช่น[code lang=”php” title=”_form.php”]
…
<?= $form->field($model, ‘name_en’)->textInput() ?>
<?= $form->field($model, ‘name_jp’)->textInput() ?>
<?= $form->field($model, ‘name_th’)->textInput() ?>
…
[/code]

วิวก็ตามรูปแบบเหมือนตัวอื่นๆตามปกติ[code lang=”php” title=”view.php”]
…
<?= DetailView::widget([
‘model’ => $model,
‘attributes’ => [
‘post_id’,
‘status’,
…
‘name_en’,
‘name_jp’,
‘name_th’,
…
‘date_publish’,
‘date_expire’,
‘log_created’,
‘log_created_by’,
‘log_updated’,
‘log_updated_by’,
],
]) ?>
…[/code]

Proudly powered by WordPress | Theme: Appointment Blue by Webriti