본문 바로가기

엉터리 개발 이야기/개인프로젝트

datatables 참고

반응형
var express = require('express');


/* GET users listing. */
module.exports = app => {
var router = express.Router();

app.use('/order', router);

router.get('/', function (req, res, next) {
app.db.models.partner.findAll({
}).then((result) => {
res.render('order', {title: 'Order', partner_list: result});
});

});

router.post('/list', (req, res, next)=> {

let param = {};

if(req.body.partner_id !== '' && req.body.partner_id !== '-1') {
param.partnerId = req.body.partner_id;
}

if(req.body.order_number !== '') {
param.order_id = req.body.order_number;
}

if(req.body.order_from_date !== '') {
param.order_date = {
[app.db.Sequelize.Op.gte]: req.body.order_from_date
}
//param.order_date = req.body.search.order_from_date;
}

if(req.body.order_to_date !== '') {
param.order_date = {
[app.db.Sequelize.Op.lte]: req.body.order_to_date
}
}

app.db.models.order.findAndCountAll({
where: param,
include: [
{
model: app.db.models.partner,
as: 'partner'
}
],
offset: Number(req.body.start),
limit: Number(req.body.length)
}).then((result) => {

obj = {
"draw":req.body.draw,
"recordsTotal": result.count,
"recordsFiltered": result.count,
"data": result.rows
}

res.send(obj);
});
});

router.post('/search', (req, res, next) => {
res.send('1');
});

router.post('/status', (req, res, next) => {
const status_code = req.body.status_code;
const order_id_list = req.body.order_id_list;
console.log(order_id_list);
console.log(typeof(Object.entries(order_id_list)));

let ids = [];
for(let id in order_id_list) {
console.log(id);
ids.push(id);
}


app.db.models.order.update(
{ status: status_code },
{
where : {
id: {
[app.db.Sequelize.Op.in]: order_id_list
}
}
//where : {id : 1 }
}).then(result => {
console.log(result);
res.send('OK');
});
});


}


<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<% include ./partials/head %>
</head>
<body>
<% include ./partials/nav %>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h3 class="mt-lg-5">원주문 리스트</h3>
<div class="row" style="padding-bottom:20px;padding-top:20px">
<form id="searchForm" action="/order/search" method="post" class="form-inline" style="width:100%">
<label calss="col-2 col-form-label" for="txt_order_number">주문번호</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="txt_order_number">

<label class="col-2 col-form-label" for="select_partner">제휴사</label>
<select id="select_partner">
<option value="-1"></option>
<%
for(var i=0; i<partner_list.length; i++) {
%><option value="<%= partner_list[i].id %>"> <%= partner_list[i].name %> </option>
<% }
%>
</select>

<label class="col-2 col-form-label">발주날짜</label>
<input type="date" class="form-control mb-2 mr-sm-2 mb-sm-0" id="date_from_order">
~
<input type="date" class="form-control mb-2 mr-sm-2 mb-sm-0" id="date_to_order">

<input type="submit" class="btn btn-primary" value="Search"/>
</form>

</div>
<div class="row" style="padding-bottom:20px">
<label class="col-1">상태</label>
<select id="select_status" class="col-1">
<option value="COMPLETE">완료</option>
<option value="CANCEL">취소</option>
<option value="RETURN">반품</option>
<option value="CHECK">확인</option>
</select>
<button class="col-1 btn btn-primary" onclick="changeStatus()">상태변경</button>
</div>
<div>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th><input type="checkbox" id="chk_all"/></th>
<th>No.</th>
<th>주문번호</th>
<th>발주날짜</th>
<th>제휴사명</th>
<th>상품명</th>
<th>수량</th>
<th>상태</th>
<th>비고</th>
<th>중복건수</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</body>

<script>
const abc = {
partner_id: 1,
offset: 1,
limit: 2,
sub_ojb : {
name : 'sub1',
age : 20
}
}
var table;
$(document).ready(function() {
table = $('#example').DataTable( {
"processing": true,
"serverSide": true,
"paging": true,
"pagingType" : 'full_numbers',
"lengthMenu": [[ 3, 20, 50, 100, -1 ], [ 3, 20, 50, 100, "All" ]],
"pageLength" : 3,
"lengthChange": true,
"searching": false,
"ordering": false,
//"responsive": true,
"contentType" : "application/json; charset=utf-8",
"ajax": {
"url":"http://localhost:3000/order/list",
"type":"POST",
"dataType":"json",
"contentType" : "application/json; charset=utf-8",
"data":function (d) {
// d.searchValue = {
// partner_id: 1,
// order_number: null,
// }

d.order_number = $("#txt_order_number").val();
d.partner_id = $("#select_partner option:selected").val();
d.order_from_date = $("#date_from_order").val();
d.order_to_date = $("#date_to_order").val();

return JSON.stringify(d);
},
// "dataSrc":function(json) {
// alert(json.data);
// return json.data;
// }
},
"columns": [
{ data: "id" },
{ data: "id" },
{ data: "order_id" },
{ data: "order_date" },
{ data: "partnerId" },
{ data: "product_name" },
{ data: "amount" },
{ data: "status" },
{ data: "note" },
{ data: "duplication_count"},
],
"columnDefs": [
{
order: false,
targets: 0,
render: function(data, type, row) {
return '<input type="checkbox" id="chk' + data + '" value="' + data + '">';
}
},
{
targets: 2,
render: function(data, type, row) {
return data.substring(0, 10);
}
},
{
targets: 3,
render: function(data, type, row) {
return row.partner.name;
}
}
],

} );

} );

$('#chk_all').on('click', function() {
var rows = table.rows().nodes();
$('input[type="checkbox"]', rows).prop('checked', this.checked);
});

$("#searchForm").submit(function(e) {
e.preventDefault();
$('#example').DataTable().search('').draw();
});

function changeStatus() {
const rows = table.rows().nodes();
const cols = $('input[type="checkbox"]:checked', rows);
const selected_status = $('#select_status option:selected').val();

let order_id_list = [];

for(let i=0; i<cols.length; i++) {
order_id_list.push(cols[i].value);
}

const paramData = {
order_id_list : order_id_list,
status_code : selected_status
}

$.ajax({
url: 'http://localhost:3000/order/status',
type: 'POST',
contentType : "application/json; charset=utf-8",
dataType:"json",
data: JSON.stringify(paramData),
success: function(json) {
alert(json);
table.search('').draw();
}
});



}
</script>

</html>


반응형