Question

我想每30秒使用Ajax响应加载Jquery数据表。我的模型对象格式是

MyObject{
 List<Employee> data1;
 List<Employee> data2;
 List<Employee> data3;
 List<Employee> data4;
.....
}
Employee{
  String name;
  int age;
  LocalDate doj;
  String dept;
...
}

我正在将此数据加载到文档就绪，如下所示

$(document).ready(function () {
 initialzeTables();
        setInterval(function () {
            initialzeTables();
        }, 30000);

function initialzeTables() {
            $.ajax({
                url: "jsonsource.json",
                dataType: 'json',
                type: 'GET',
                data: function (d) {
                    d.date = $.fn.getCurrentDate()
                },
                success: function (result) {
                    handleResponse(result);
                }
            });
        }

}
function handleResponse(result) {
            table1Id = $("#table1");
            table1.clear();
            displayData(result.data1,table1Id);
            table1.draw();
        }

        function displayData(data, table){
            for(var i in data){
                var rowData =data[i];
                var rowStr = "<tr>"
                    + "<td>"+rowData.Name+"</td>"
                    + "<td>"+rowData.age+"</td>"
                    + "<td>"+rowData.doj+"</td>"
                    + "<td>"+rowData.dept+"</td>"
                    + "</tr>"
               $("#"+table+" tbody").append(rowStr);
            }
        }

我仅对第一个表进行了更改，但看起来它不起作用，UI显示“无数据可用”。肯定有些事情是错的，无法弄清楚。有人救援吗？

Answer 1

感谢每一位回复者。我从this

中找到了它

        <div class="filter">
            Search Data: <input type="text" id="filtertext" placeholder="Filter...">
        </div>
        <h3><font color='red'>Table1 Data</font></h3>
        <table id="table1" style="background-color: #edf1fa"
               class="display compact cell-border">

        </table>
        <br>
        <h3><font color='green'>Table2 Data</font></h3>
        <table id="table2" style="background-color: #edf1fa"
               class="display compact cell-border">

        </table>
        <br>
        <h3><font color='salmon'>Table3 Data</font></h3>
        <table id="table3" style="background-color: #edf1fa"
               class="display compact cell-border">

        </table>
        <br>
        <h3><font color='violet'>Table4 Data</font></h3>
        <table id="table4" style="background-color: #edf1fa"
               class="display compact cell-border">
        </table>
<script type="text/javascript">
    $(document).ready(function () {
        buildHeader();
        var table1 = $('#table1').DataTable({
            "sDom": 'rt',
            "pagingType": "full_numbers",
            "ordering": false,
            "fixedHeader": true,
            "bScrollCollapse": true
        });
        var table2 = $('#table2').DataTable({
            "sDom": 'rt',
            "pagingType": "full_numbers",
            "ordering": false,
            "fixedHeader": true,
            "bScrollCollapse": true
        });
        var table3 = $('#table3').DataTable({
            "sDom": 'rt',
            "pagingType": "full_numbers",
            "ordering": false,
            "fixedHeader": true,
            "bScrollCollapse": true
        });
        var table4 = $('#table4').DataTable({
            "sDom": 'rt',
            "pagingType": "full_numbers",
            "ordering": false,
            "fixedHeader": true,
            "bScrollCollapse": true
        });

        $("#filtertext").on('keyup', function (e) {
            table.search(this.value).draw();
        });
        initialzeTables();
        setInterval(function () {
            initialzeTables();
        }, 30000);
        function buildHeader() {
            var rowStr = "<thead>"
                    + "<tr>"
                    + "<th>name</th>"
                    + "<th>Age</th>"
                    + "<th>DOJ</th>"
                    + "<th>Dept</th>"
                    + "</tr>"
                    + "</thead>";
            $("table.display ").append(rowStr);
        }

        function initialzeTables() {
            $.ajax({
                url: "jsonsource.json",
                dataType: 'json',
                type: 'GET',
                data:  {
                    "date" : getCurrentDate()
                },
                success: function (result) {
                    handleResponse(result);
                }
            });
        }

        function handleResponse(result) {
            table1Id = $("#table1");
            table2Id = $("#table2");
            table3Id = $("#table3");
            table4Id = $("#table4");

            table1.destroy();
            table2.destroy();
            table3.destroy();
            table4.destroy();

            table1 = displayData(result.data1, table1Id, table1);
            table2 =  displayData(result.data2, table2Id, table2);
            table3 = displayData(result.data3, table3Id, table3);
            table4 = displayData(result.data4, table4Id, table4);
        }

        function displayData(data, tableSelector, datatable) {
            datatable = tableSelector.DataTable({
                "sDom": 'rt',
                "pagingType": "full_numbers",
                "ordering": false,
                "fixedHeader": true,
                "bScrollCollapse": true,
                "data": data,
                "columns": [
                    {"data": "name"},
                    {"data": "age"},
                    {"data": "doj"},
                    {"data": "dept"},
                ],
                "columnDefs": [
                    {
                        'targets': [0],
                        'orderable': false,
                        'render': function (data, type, row, meta) {
                            data = data != null ? data : ' ';
                            return '<a href="/URL?name=' + data +'">' + data + '</a>';
                        }
                    },
                 ]
            });
            return datatable;
        }

        function getCurrentDate() {
            return $.datepicker.formatDate('yy-mm-dd', new Date());
        }
    });
</script>

定期使用ajax响应加载JQuery数据表

1 个答案: