如何通过生成的jsonarray动态创建多个数据表？

时间：2019-02-05 06:51:15

标签： jquery json ajax jsp datatables

  

我必须为每个jsonobject创建多个数据表[   jsonarray中的每周出勤数据]。

尽管ajax请求我从Java获取JSON数组。如何为每个json对象[为每周数据]创建多个数据表？请帮我解决这个问题。

jQuery(document)
.ready(
    function () {
    jQuery(".ui-corner-br")
    .addClass('ui-widget-header_custom ');

    $('#btnShow')
    .click(
        function (event) {
        event.preventDefault();
        var month = $("#month").val();
        var year = $("#year").val();

        ajaxResource = "/secure/attendance/get-employee-work-hours-report.json?month=" + month + " & year = " + year;
        $(" # searchDataFrm ").attr(" action ", ajaxResource);
        employeeWorkHours(ajaxResource);
    });

});

function employeeWorkHours(ajaxResource) {
jQuery.unblockUI();

employeeWorkHoursTable = jQuery('#employeeWorkHoursTableWeekOne')
        .dataTable({
            " bJQueryUI " : true,
            " sPaginationType " : " full_numbers ",
            " iDisplayLength " : 250,
            " bSort " : true,
            " bLengthChange " : true,
            " bProcessing " : true,
            " bServerSide " : true,
            " bAutoWidth " : false,

            " bDestroy " : true,
            " bRetrieve " : false,
            " sAjaxSource " : basePath + ajaxResource,

            " fnServerData " : fnServerData,

            " aoColumns " : [ {
                " sWidth " : " 15 % ",
                " bSortable " : true,
                " bSearchable " : false
            }, // Date
            {
                " sWidth " : " 25 % ",
                " bSortable " : true
            }, // Day
            {
                " sWidth " : " 20 % ",
                " bVisible " : true,
                " bSearchable " : false
            }, // 1st In
            {
                " sWidth " : " 20 % ",
                " bSearchable " : false
            }, // Last In
            {
                " sWidth " : " 20 % ",
                " bSearchable " : false
            } // Work Hours

            ],
            " fnDrawCallback " : function(oSettings) {
    }
});

jQuery(".ui - corner - br ").addClass('ui-widget-header_custom ');

jQuery('.dataTables_length').hide();
$(" # employeeWorkHoursTableWeekOne_first ").html(" << ");
$(" # employeeWorkHoursTableWeekOne_previous ").html(" < ");
$(" # employeeWorkHoursTableWeekOne_next ").html(" > ");
$(" # employeeWorkHoursTableWeekOne_last ").html(" >> ");
}

function fnServerData(sSource, aoData, fnCallback) {
isSessionExtend = true;

    if (xhr && xhr.readystate != 4) {
        xhr.abort();
    }

    xhr = $.ajax({
        " dataType " : 'json',
        " type " : " GET ",
        " url " : sSource,
        " contentType " : 'application/json',
        " data " : aoData,
        " success " : fnCallback,
        " timeout " : 20000,
        " cache " : false,
        " error " : handleAjaxError
    });

    jQuery('html, body').animate({
        scrollTop : '0px'
    }, 300);
}

JSON数组：

[{
    "iTotalRecords": 0,
    "aaData": [],
    "iTotalDisplayRecords": 0,
    "status": "OK"
},
{
    "iTotalRecords": 0,
    "aaData": [],
    "iTotalDisplayRecords": 0,
    "status": "OK"
},
{
    "iTotalRecords": 5,
    "aaData": [["13/11/2018", "13/11/2018", "10:33", "21:17", "09:20", 3],
    ["14/11/2018", "14/11/2018", "10:48", "21:48", "09:36", 3],
    ["15/11/2018", "15/11/2018", "14:46", "22:07", "07:21", 3],
    ["16/11/2018", "16/11/2018", "12:19", "20:32", "07:21", 3],
    ["17/11/2018", "17/11/2018", "11:23", "17:05", "05:42", 3]],
    "iTotalDisplayRecords": 5,
    "status": "OK"
},
{
    "iTotalRecords": 6,
    "aaData": [["01/12/2018", "01/12/2018", "11:58", "18:32", "05:56", 5],
    ["26/11/2018", "26/11/2018", "10:34", "19:23", "08:49", 5],
    ["27/11/2018", "27/11/2018", "11:30", "21:01", "09:31", 5],
    ["28/11/2018", "28/11/2018", "11:07", "19:53", "07:54", 5],
    ["29/11/2018", "29/11/2018", "18:14", "20:48", "02:34", 5],
    ["30/11/2018", "30/11/2018", "14:46", "21:38", "06:52", 5]],
    "iTotalDisplayRecords": 6,
    "status": "OK"
}]

1 个答案:

答案 0 :(得分：0)

这就是我的工作方式（因为我没有您的后端环境，因此我注释掉了$.ajax部分；而且，我没有弄清楚标题，所以我做了标题）： 

//Prepare control elements
let yearOptions = [...Array(4)].reduce((options, option, index) => options += `<option value="${index+2016}">${index+2016}</option>`, '');
$('#year').append(yearOptions);
let monthOptions = [...Array(12)].reduce((options, option, index) => options += `<option value="${index+1}">${index+1}</option>`, '');
$('#month').append(monthOptions);

//Trigger report generation on click
$('#getreport').on('click', function(){
  //Do AJAX request to get data into variable
  /*
  $.ajax({
    method: 'GET',
    url: '/route/to/json/responder',
    data: {year:$('#year').val(), month:$('#month').val()},
    success: drawDataTables(data)
  });
  */
  //Emulate data receipt in response to AJAX call
  let srcData = [{
        "iTotalRecords": 0,
        "aaData": [],
        "iTotalDisplayRecords": 0,
        "status": "OK"
    },
    {
        "iTotalRecords": 0,
        "aaData": [],
        "iTotalDisplayRecords": 0,
        "status": "OK"
    },
    {
        "iTotalRecords": 5,
        "aaData": [["13/11/2018", "13/11/2018", "10:33", "21:17", "09:20", 3],
        ["14/11/2018", "14/11/2018", "10:48", "21:48", "09:36", 3],
        ["15/11/2018", "15/11/2018", "14:46", "22:07", "07:21", 3],
        ["16/11/2018", "16/11/2018", "12:19", "20:32", "07:21", 3],
        ["17/11/2018", "17/11/2018", "11:23", "17:05", "05:42", 3]],
        "iTotalDisplayRecords": 5,
        "status": "OK"
    },
    {
        "iTotalRecords": 6,
        "aaData": [["01/12/2018", "01/12/2018", "11:58", "18:32", "05:56", 5],
        ["26/11/2018", "26/11/2018", "10:34", "19:23", "08:49", 5],
        ["27/11/2018", "27/11/2018", "11:30", "21:01", "09:31", 5],
        ["28/11/2018", "28/11/2018", "11:07", "19:53", "07:54", 5],
        ["29/11/2018", "29/11/2018", "18:14", "20:48", "02:34", 5],
        ["30/11/2018", "30/11/2018", "14:46", "21:38", "06:52", 5]],
        "iTotalDisplayRecords": 6,
        "status": "OK"
    }];						
	drawDataTables(srcData);
});

//DataTables rendering function that iterates over data entries
var drawDataTables = data => {
	data.forEach((entry, index) => {
  		$('#reportwrapper').append(`<table id="${'table'+index}"></table>`);
      $(`#table${index}`).DataTable({
      		data: entry.aaData,
          sDom: 't',
          columns: [{
          	title:'Header 1'
            },{
            title:'Header 2'
            },{
            title:'Header 3'
            },{
            title:'Header 4'
            },{
            title:'Header 5'
            },{
            title:'Header 6'
          }]
      });
  });
};
<!doctype html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
  <label>year</label>
  <select id="year"></select>
  <label>month</label>
  <select id="month"></select>
  <button id="getreport">get report</button>
  <div id="reportwrapper"></div>
</body>
</html>

相关问题
最新问题