หมวดหมู่: jQuery

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

2014-08-232014-08-23| phunsanitphunsanit| 0 Comment | 00:00

แนวคิดคือ คัดลอกข้อมูลที่เลือกเอาไว้จาก DataTables ตัวหนึ่งไปยังอีกตัวหนึง
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="filtersDataTablesA" 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="DataTablesA" 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>

ส่วนที่เขียนเป็นฟังก์ชั่นกลางไว้ให้ไฟล์อื่นเรียกใช้
jQuery.DataTables/DataTables.js

function iCheckBulk (DataTablesArea, dataTableObject) {
 DataTablesArea.on ('ifChanged', '.checkAll', function (event) {

 var datas = dataTableObject.data () ;
 var inputs = $ ('input:checkbox, input:radio', DataTablesArea) ;

 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', DataTablesArea)) ;
 }) ;

}

/* change filtersTable data value on input name enables is change */
function iCheckChange (DataTablesFiltersA, filtersTableObject, dataTableObject) {
 $ ('tbody', DataTablesFiltersA) .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',
 }) ;
}

ไฟล์ที่ทำหน้าที่ควบคุมการคัดลอกข้อมูล
jQuery.DataTables/data.json.transferDataToAnotherTable.js

$ (function () {
 
 dataDataTablesA = $ ('#dataDataTablesA') ;
 filtersDataTablesA = $ ('#filtersDataTablesA') ;
 DataTablesA = $ ('#DataTablesA') ;
 
 filtersTable = filtersDataTablesA
 .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 (filtersDataTablesA, filtersTable) ;
 
 dataTable = DataTablesA
 .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 (DataTablesA, dataTable) ;
 
 iCheckChange (filtersDataTablesA, filtersTable, dataTable) ;
 
 iCheckCopy (dataTable, filtersTable, 'DISTRICT_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

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

Read MoreRead More