Datatables 서버 모드 사용

13476 단어 jquery전단datatables
Datatables                  jquery      。                 。     ,       。[Datatables    ](http://dt.thxopen.com/index.html)[github    ](https://github.com/fudanstar/DataTables)
        ,       webservice             ,          ,              ,            。

javascript 코드
table = $('#resultfile_datatable').DataTable(//    Datatable
            {
                        ajax : {//  ajax        
                            "url": "*******",//    
                            "dataSrc": function (json) {//          ,jason       
                                var dataSet = new Array();
                                dataSet=json.data;
                                 ...//       
                                return dataSet;//       datatable    
                            }
                        },
                        serverSide: true,//        ,      true
                        processing: true,//   true,           
                        columns : [ {"data" : "name"}, //        
                                    {"data" : "proTopicName"}, 
                                    {"data" : "missionName"}, 
                                    {"data" : "areaName"}, 
                                    {"data" : "fileformat"}, 
                                    {"data" : "research"}, 
                                    {"data" : "category"}, 
                                    {"data" : null} ],
                        columnDefs : [ {//   ,         
                            targets : 7,//    8 ,     8        ,        。
                            render : function(data, type, row) {//     
                                var html = '&nbsp;<button type="button" class="btn btn-info btn-sm" ">  </button><br><br>&nbsp;<button type="button" class="btn btn-danger btn-sm" ">  </button>';//      button,    ,    
                                return html;//  html    ,       8      
                            }
                        },{
                             orderable:false,//    
                             targets:[1,2,3,5,6]   //    
                         }
                        ],
                         "language": {//   
                                "processing":"<p style=\"font-size: 20px;color: #F79709;\">       。。。。   !</p>",//                
                                "lengthMenu": "_MENU_      ",
                                "zeroRecords": "      ",
                                "info": "  _PAGE_   (    _PAGES_   )",
                                "infoEmpty": "   ",
                                "infoFiltered": "(  _MAX_      )",
                                "paginate": {
                                    "previous": "   ",
                                    "next": "   "
                                }
                            },
                        "dom": "<'row'<'col-xs-2'l><'#mytool.col-xs-4'><'col-xs-6'f>r>" +"t" +"<'row'<'col-xs-6'i><'col-xs-6'p>>",//      
                        initComplete : function() {//          
                            $("#mytool").append('<button type="button" class="btn btn-warning btn-sm" id="importfilebutton" onclick="jumpimportfilepage();">  </button>');//                
                        }
                    });
}

백그라운드 액 션 코드
    //      
    private String draw = "0";
    //      
    private String start;
    //    
    private String length;
    //    
    private String recordsTotal = "0";
    //      
    private String recordsFiltered = "";
    //    
    private String[] cols = {"name", "proTopicName", "missionName", "areaName", "fileformat", "areaName", "research", "category"};
    //            
    private String orderColumn = "0";
    //          asc
    private String orderDir = "asc";
    //           
    private String searchValue;

public void getAllResultFiles() throws IOException
    {
        //      
        HttpServletRequest request = ServletActionContext.getRequest();
        draw=request.getParameter("draw");
        start = request.getParameter("start");
        length = request.getParameter("length");
        orderColumn = request.getParameter("order[0][column]");
        orderColumn = cols[Integer.parseInt(orderColumn)];
        orderDir = request.getParameter("order[0][dir]");
        searchValue = request.getParameter("search[value]");
        List<String> sArray = new ArrayList<String>();
        if (!searchValue.equals("")) {//         ,      
            sArray.add(" name like '%" + searchValue + "%'");
            sArray.add(" fileformat like '%" + searchValue + "%'");  
        }
        String individualSearch = "";
        if (sArray.size() == 1) {
            individualSearch = sArray.get(0);
        } else if (sArray.size() > 1) {
            for (int i = 0; i < sArray.size() - 1; i++) {
                individualSearch += sArray.get(i) + " or ";
            }
            individualSearch += sArray.get(sArray.size() - 1);
        }
        //         
        recordsTotal=""+resultFilesService.getModelCount();

        String searchSQL = "";
        if (individualSearch != "") {
            searchSQL = " where " + individualSearch;
        }
        searchSQL+= " order by " + orderColumn + " " + orderDir;
        List<Resultfiles> resultfilesList=resultFilesService.findResultfilesList(searchSQL,start,length);
        if (searchValue != "") {
            recordsFiltered =""+resultFilesService.getModelCount(searchSQL);
        }
        else {
            recordsFiltered = recordsTotal;
        }                   

        if(resultfilesList!=null)
        {
            ...//       
            Map<Object, Object> info = new HashMap<Object, Object>();
            info.put("data", resultfilesBeanList);
            info.put("recordsTotal", recordsTotal);
            info.put("recordsFiltered", recordsFiltered);
            info.put("draw", draw);

            JSONObject jsonstr = JSONObject.fromObject(info);
            System.out.println(jsonstr.toString());
            results = jsonstr.toString();
        }
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write(results);
        response.getWriter().close();
    }

이상 은 자바 웹 환경 에서 Datatables 컨트롤 의 서버 모드 를 사용 합 니 다.

좋은 웹페이지 즐겨찾기