แนวคิดคือ คัดลอกข้อมูลที่เลือกเอาไว้จาก 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
อ่านเพิ่มเติม