[ datatable ] jquery datatable and editor exemple 사용법 예

see List

이거 하나로 export (excel,pdf,csv,print,copy) 및 수정 삭제 , 그리드형식으로 내용상세 펼쳐보기

컬럼별 정렬 , 전체컬럼 검색, 단일 컴럼검색, 날짜 검색, 날짜 범위 검색 등 모든 기능이 사용가능하다

반응형웹도 탑재되있다.

<b>제품분류목록</b>

</h4>

제품의 대분류 목록을 표시합니다.

</p>

<thead>

<tr>

<th class="search_column_string desktop">영문분류명</th>

<th class="search_column_date_range desktop">최종수정일</th>

<th class="desktop">최종수정유저</th>

</tr>

</thead>

<tfoot>

<tr>

<th class="search_column_string">영문분류명</th>

<th class="search_column_date_range">최종수정일</th>

<th class="">최종수정유저</th>

</tr>

</tfoot>

</table>

</div>

var editor;

var searchType;

var mainTable;

function getStateList() {

var aStateList = new Array();

aStateList[0] = { "label": "Type1", "value": "PS0003" };

aStateList[1] = { "label": "Type2", "value": "PS0000" };

aStateList[2] = { "label": "Type3", "value": "PS0009" };

aStateList[3] = { "label": "Type4", "value": "PS9939" };

return aStateList;

}

$(document).ready(function() {

editor = new $.fn.dataTable.Editor( {

ajax: {

remove: {

type:'POST'

,url: "<c:url value='${saveProdTypeCodeAjax}' />"

,data : function(data1){

var paramData = data1.data[mainTable.row('.selected').id()];

paramData.action=data1.action;

return data1.data[mainTable.row('.selected').id()];

}

,"beforeSend" : function(xhr) {

xhr.setRequestHeader($phySecAjaxHeader, $phySecAjaxToken);

}

,"dataType": "jsonp"

}

,create:{

type:'POST'

,url: "<c:url value='${saveProdTypeCodeAjax}' />"

,data : function(data1){

data1.data[0].action=data1.action;

return data1.data[0];

}

,"beforeSend" : function(xhr) {

xhr.setRequestHeader($phySecAjaxHeader, $phySecAjaxToken);

}

,"dataType": "jsonp"

}

,edit:{

type:'POST'

,url: "<c:url value='${saveProdTypeCodeAjax}' />"

,data : function(data1){

var paramData = data1.data[mainTable.row('.selected').id()];

paramData.action=data1.action;

return data1.data[mainTable.row('.selected').id()];

}

,"beforeSend" : function(xhr) {

xhr.setRequestHeader($phySecAjaxHeader, $phySecAjaxToken);

}

,"dataType": "jsonp"

}

,table: "#datatable"

,idSrc: 'codeKey'

,fields: [

label: "codeNameEn:"

,name: "codeNameEn"

}

label: "codeValue:"

,name: "codeValue"

}

{

label: "codeKey:"

,name: "codeKey"

,type:"hidden"

}

label: "분류명 : "

,name: "codeName"

}

label: "영문분류명 : "

,name: "codeNameEn"

}

label: "설명 : "

,name: "codeNote" ,type: 'textarea'

}

label: "creDate date:"

,name: "creDate"

,type: 'datetime'

,def: function () { return new Date(); }

,fieldInfo: 'Euro style date with 24 hour clock'

}

label: "updDate:"

,name: "updDate"

,type: 'datetime'

,def: function () { return new Date(); }

,format: 'YY-MM-DD HH:mm:ss'

,fieldInfo: 'US style m-d-y date input with 12 hour clock'

}

label: "Site:"

,name: "pCodeKey"

,type: "select"

,placeholder: "Select a location"

,"ipOpts": getStateList()

}

]

} );

editor.on( 'preSubmit', function ( e, o, action ) {

if ( action !== 'remove' ) {

var codeKey = editor.field( 'codeName' );

var codeNote = editor.field( 'codeNote' );

// ... additional validation rules

// If any error was reported, cancel the submission so it can be corrected

if ( this.inError() ) {

return false;

}

} );

mainTable = $('#datatable').DataTable({

dom: 'Bfrtip'

,rowId: 'codeKey'

,responsive: true

,order: [ 0, 'desc' ]

,"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]

,"processing" : true

,"serverSide" : true

,"ajax" : {

"type" : "POST"

,"url" : '<c:url value="${prodTypeCodeListAjax}"/>'

,"dataType": "jsonp"

,"beforeSend" : function(xhr) {

xhr.setRequestHeader($phySecAjaxHeader, $phySecAjaxToken);

}

,"data": function(d){

if(searchType != null){

var data1 = {

"data" : JSON.stringify(d)

,"searchType" :searchType

}

searchType = null;

}else{

var data1 = {

"data" : JSON.stringify(d)

}

return data1;

}

,"columns" : [

{

"data" : "codeKey"

,"render": function (val, type, row) {

return val;

}

//,"visible": false

//,"hidden":false

,"defaultOrder": true

,"sortOrder": 'desc'

,"name" : "CODE_KEY"

}

"data" : "codeName"

,"name" : "CODE_NAME"

}

"data" : "codeNameEn"

,"name" : "CODE_NAME_EN"

}

"data" : "creDate"//, 'type': 'date', "dateFormat": "yy-mm-dd"

,"name" : "CRE_DATE"

,"searchable": true

,"className": "text-center"

}

data: null

, render: function ( data, type, row ) {

return data.tmp1+'('+data.creUserId+')';

}

,"searchable": false

,"name" : "CRE_USER_ID"

}

"data" : "updDate"//, 'type': 'date', "dateFormat": "yy-mm-dd"

,"name" : "UPD_DATE"

,"searchable": true

,"className": "text-center"

}

data: function ( data, type, row ) {

return data.updUserId != null ? data.tmp2+'('+data.updUserId+')' : "";

}

,"searchable": false

,"name" : "UPD_USER_ID"

}

"data" : "useYn"

,"name" : "USE_YN"

,"className": "text-center"

,render: function ( data, type, row ) {

var style="";

if(data=="Y"){

style="color:blue;"

}else if(data == "N"){

style="color:red;"

}

return "<sapn " + "style='"+ style +"'>" + data+"</sapn>";

}

data:"codeNote"

,"name" : "CODE_NOTE"

,"searchable": false

}

]

,select: true

,buttons: [

{ extend: 'create', editor: editor , text: '추가'}

,{ extend: 'edit', editor: editor , text: '수정'}

extend: 'remove'

,text: '삭제/취소'

,editor: editor

,formMessage: function ( e, dt ) {

return "정말 삭제하시겠습니까?";

}

extend: 'collection'

,text: 'Export'

,buttons: [

'copy'

,'excel'

,'csv'

,'pdf'

,'print'

]

}

]

});

$('#datatable tfoot th').each( function () {

var title = $(this).text();

if($(this).hasClass("search_column_date_range")){

$(this).html( '<input type="text" class="date_range_picker" readonly="true" placeholder="Search '+title+'" />' );

}

if($(this).hasClass("search_column_string")){

$(this).html( '<input type="text" class="string_search" placeholder="Search '+title+'" />' );

}

} );

jQuery('.date_range_picker').daterangepicker({

format: 'YYYY/MM/DD HH:mm'

//,startDate: moment()//moment().subtract(29,'days')

//endDate: moment()

//,dateLimit: { days: 60}

,minDate: '2000/01/01 00:00'

,maxDate: '2099/01/01 00:00'

,showDropdowns: true

,showWeekNumbers: true

,timePicker: true

,timePickerIncrement: 1

,timePicker24Hour: true

,todayHighlight : true

,ranges: {

'오늘': [moment({hour:0,minute:0}), moment({hour:23,minute:59})]

,'어제': [moment({hour:0,minute:0}).subtract(1, 'days'), moment({hour:23,minute:59}).subtract(1, 'days')]

,'최근 7일': [moment({hour:0,minute:0}).subtract(6 ,'days') ,moment({hour:23,minute:59})]

,'최근 한달': [moment({hour:0,minute:0}).subtract(29 ,'days'), moment({hour:23,minute:59})]

,'이번달': [moment({hour:0,minute:0}).startOf('month') ,moment({hour:23,minute:59}).endOf('month')]

,'지난달': [moment({hour:0,minute:0}).subtract(1 ,'month').startOf('month'), moment({hour:23,minute:59}).subtract(1,'month').endOf('month')]

}

,opens: 'left'

,drops: 'down'

,buttonClasses: ['btn','btn-sm']

,applyClass: 'btn-default'

,cancelClass: 'btn-white'

,separator: ' to '

,locale: {

applyLabel: 'Submit'

,cancelLabel: 'Cancel'

,fromLabel: 'From'

,toLabel: 'To'

,customRangeLabel: '임의'

,daysOfWeek: ['일','월','화','수','목','금','토']

,monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']

,firstDay: 1

,format: 'YYYY/MM/DD HH:mm'

}

}, function (start, end, label) {

});

mainTable.columns().every( function () {

var that = this;

$( '.date_range_picker', this.footer() ).on( 'keyup change', function () {

searchType = "rangeDate"

if ( that.search() !== this.value ) {

that

.search( this.value )

.draw();

}

} );

$( '.string_search', this.footer() ).on( 'keyup change', function () {

searchType = "string"

if ( that.search() !== this.value ) {

that

.search( this.value )

.draw();

}

} );

});

</script>

참조 라이브러리

css

contoller

@RequestMapping(value = "${hdl.prod.mngt.getProdTypeCodeList.ajax}",method=RequestMethod.POST,produces = MediaType.APPLICATION_JSON_VALUE)

@ResponseBody

public Map<String,Object> getProdTypeCodeList(

ModelMap model

,@RequestParam("data")String tableBean

,@RequestParam(value="searchType",defaultValue="list")String searchType

) throws JsonParseException, JsonMappingException, IOException {

JqueryTableBean lectMap = (om.readValue(tableBean, JqueryTableBean.class));

return mngtService.getProdTypeCodeList(model,lectMap,searchType);

}

@RequestMapping(value = "${hdl.prod.mngt.saveProdTypeCode.ajax}",method=RequestMethod.POST,produces = MediaType.APPLICATION_JSON_VALUE)

@ResponseBody

public Map<String,Object> saveProdTypeCode(

ModelMap model

,@RequestParam("action")String action

,@ModelAttribute @Valid CommCodeBean codeBean

,BindingResult bindingResult

,Principal principal

) {

return mngtService.saveProdTypeCode(model,codeBean,bindingResult,principal,action);

}

service

@Override

public Map<String, Object> getProdTypeCodeList(ModelMap model,JqueryTableBean tableBean,String searchType) {

Map<String,Object> resultMap = new HashMap<String,Object>();

model.put("pCodeKey", "PS0000");

fpUtil.defaultDatatableSelect(model, tableBean, searchType);

List<CommCodeBean> codeList = mngtDao.selectCodeListByPCodeList(model);

int totalRow = mngtDao.selectCodeListByPCodeListCnt(model);

resultMap.put("data",codeList);

resultMap.put("draw",tableBean.getDraw());

resultMap.put("recordsTotal",totalRow);

resultMap.put("recordsFiltered",totalRow);

return resultMap;

}

@Override

public Map<String, Object> saveProdTypeCode(ModelMap model,CommCodeBean codeBean, BindingResult bindingResult,Principal principal,String action) {

Map<String,Object> resultMap = new HashMap<String,Object>();

if(bindingResult.hasErrors()){

List<FieldError> allErrors = bindingResult.getFieldErrors();

List<HashMap<String, String>> collect = allErrors.stream().map(v1->{

HashMap<String, String> tmpMap = new HashMap<String,String>();

tmpMap.put("name",v1.getField());

tmpMap.put("status",v1.getDefaultMessage());

return tmpMap;

}).collect(Collectors.toList());

resultMap.put("fieldErrors",collect);

return resultMap;

}

codeBean.setCreUserId(principal.getName());

if(action.equals("create")){

mngtDao.insertProdTypeCode(codeBean);

}else if(action.equals("edit")){

mngtDao.updateProdTypeCode(codeBean);

}else if(action.equals("remove")){

mngtDao.updateProdTypeCodeUseYnByCodeKey(codeBean.getCodeKey());

}

resultMap.put("data", codeBean);

return resultMap;

}

util

public void defaultDatatableSelect(ModelMap model,JqueryTableBean tableBean,String searchType){

model.put("sNum",tableBean.getStart()+1);

model.put("eNum",tableBean.getStart()+tableBean.getLength());

JqueryTableOrder order = tableBean.getOrder().get(0);

List<JqueryTableColumn> columns = tableBean.getColumns();

String gsWord =tableBean.getSearch().getValue();

Optional<JqueryTableColumn> filter = columns.stream().filter(v1 -> PhychodeUtil.isNotEmpty(v1.getSearch().getValue())).findFirst();

if(filter.isPresent()){

JqueryTableColumn searchColumn = filter.get();

if(PhychodeUtil.isNotEmpty(searchColumn)){

model.put("sType", searchColumn.getName());

String sWord = searchColumn.getSearch().getValue();

if(searchType.equals("rangeDate")){

String[] split = sWord.split(" - ");

model.put("searchBeginDate", split[0]);

model.put("searchEndDate", split[1]);

}else{

model.put("sWord",sWord);

}

model.put("searchType",searchType);

}

if(PhychodeUtil.isNotEmpty(gsWord)){

List<String> searchList = columns.stream().filter(JqueryTableColumn::isSearchable).map(v1->v1.getName()).collect(Collectors.toList());

model.put("sWord", gsWord);

model.put("sTypeList",searchList);

if(PhychodeUtil.isNotEmpty(searchList)){

model.put("searchType",searchType);

}

model.put("orderField",columns.get(order.getColumn()).getName());

model.put("orderType",order.getDir());

}

FrontEnd

no	title	user
no	title	user

[ datatable ] jquery datatable and editor exemple 사용법 예

Contents

FrontEnd

Comments ( 0 )

Leave a Comment

기술문서

견적 및 상담

정보 및 소통

Login Here

[ datatable ] jquery datatable and editor exemple 사용법 예

Contents

FrontEnd

Comments ( 0 )

Leave a Comment

기술문서

견적 및 상담

정보 및 소통