แนวคิดคือ คัดลอกข้อมูลที่เลือกเอาไว้จาก DataTables ตัวหนึ่งไปยังอีกตัวหนึง
jQuery.DataTables/data.json.transferDataToAnotherTable.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | $(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
อ่านเพิ่มเติม
About the author