issue with displaying jquery datatable

问题: I am currently working with a jsp project and I am having some issues displaying a jquery datatable that gathers info through an ajax call. The ajax call is gathering the c...

问题:

I am currently working with a jsp project and I am having some issues displaying a jquery datatable that gathers info through an ajax call. The ajax call is gathering the correct data and I am not getting any errors or datatable warning alerts.

here is my jsp file:

<table id="dattable" style="width:100%">

     <thead>
         <tr>
             <th scope="col">columnOne</th>
             <th scope="col">columnTwo</th>
             <th scope="col">columnThree</th>
             <th scope="col">columnFour</th>
             <th scope="col">ColumnFive</th>                                                  
         </tr>
      </thead>
      <tbody>
      </tbody>
</table>

and here is the javascript file:

$(document).ready(function () {



var inf = "";
$.ajax({
    type: 'GET',
    url: "apiUrl", //this has a legit url and gets the correct information
    success: function (json) {
        populateDataTable(json);
    }
});



function populateDataTable(jsonData) {
    var table = $('#dattable').DataTable({
        data: jsonData,
        bProcessing: true,
        bPaginate: false,
        dom: 'Brtip',
        columnDefs: { sortable: false, targets: [4] },
        columns: [
            { data: "varOne" },
            { data: "varTwo" },
            { data: "varThree" },
            { data: "varFour" },
            { data: "varFive" }


        ],
        buttons: [
            {
                text: 'Print <i class="fa fa-lg fa-print"></i>',
                extend: 'print',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4]
                },
                className: 'table-btns print-btn'
            },
            {
                text: 'Export to Excel <i class="fa fa-lg fa-file-excel-o"></i>',
                extend: 'excel',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4]
                },
                className: 'table-btns excel-btn'
            },
            {
                text: 'Add <i class="fa fa-lg fa-plus"></i>',
                action: function () {
                    $('#addModal').modal('show');
                },
                className: 'table-btns add-btn'
            },
            {
                text: 'Refresh <i class="fa fa-lg fa-repeat"></i>',
                action: function () {
                    window.location.reload();
                },
                className: 'table-btns refresh-btn'
            }
        ]
    });


    table.columns().every(function () {
        var that = this;

        $('input', this.header()).on('keyup change', function () {
            if (that.search() !== this.value) {
                that
                    .search(this.value)
                    .draw();
            }
        });
    });

and this is the data that is being gathered from the ajax call:

[{ id: 1, varOne: "var1", varTwo: 1234, varThree: "var3", varFour: "var4", varFive:223 }]

I have referenced the datatables tutorials and documentation very well, I am assuming I am missing one variable somewhere that could be screwing it up. I also do have the dependencies included on the jsp file (both css and js files). Thank you in advance!


回答1:

If your API doesn't set a Content-type: application/json header, you need

dataType: "json"

in your $.ajax options.


回答2:

I don't think you have any problems with your JSON or ajax request. I created a fiddle based on your code snippet.

http://jsfiddle.net/sumeshnu/7yLn6pqt/

The only thing you seems missing is

https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js

this jquery library. Because you need to include the buttons.print.min.js file as well if you want the print button.

$(document).ready(function() { 
var jsonData=[{ id: 1, varOne: "var1", varTwo: 1234, varThree: "var3", varFour: "var4", varFive:223 }];
var table = $('#dattable').DataTable({
        data: jsonData,
        bProcessing: true,
        bPaginate: false,
        dom: 'Brtip',
        columnDefs: { sortable: false, targets: [4] },
        columns: [
            { data: "varOne" },
            { data: "varTwo" },
            { data: "varThree" },
            { data: "varFour" },
            { data: "varFive" }


        ],
        buttons: [
            {
                text: 'Print <i class="fa fa-lg fa-print"></i>',
                extend: 'print',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4]
                },
                className: 'table-btns print-btn'
            },
            {
                text: 'Export to Excel <i class="fa fa-lg fa-file-excel-o"></i>',
                extend: 'excel',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4]
                },
                className: 'table-btns excel-btn'
            },
            {
                text: 'Add <i class="fa fa-lg fa-plus"></i>',
                action: function () {
                    $('#addModal').modal('show');
                },
                className: 'table-btns add-btn'
            },
            {
                text: 'Refresh <i class="fa fa-lg fa-repeat"></i>',
                action: function () {
                    window.location.reload();
                },
                className: 'table-btns refresh-btn'
            }
        ]
    });


    table.columns().every(function () {
        var that = this;

        $('input', this.header()).on('keyup change', function () {
            if (that.search() !== this.value) {
                that
                    .search(this.value)
                    .draw();
            }
        });

});
});
table.dataTable tbody>tr.selected,
table.dataTable tbody>tr>.selected {
  background-color: #A2D3F6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
      <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
      <script type="text/javascript" src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
      <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <script type="text/javascript" src="//cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script>
      <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css">
      <script type="text/javascript" src="http://kingkode.com/datatables.editor.lite/js/altEditor/dataTables.altEditor.free.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<table id="dattable" style="width:100%">

     <thead>
         <tr>
             <th scope="col">columnOne</th>
             <th scope="col">columnTwo</th>
             <th scope="col">columnThree</th>
             <th scope="col">columnFour</th>
             <th scope="col">ColumnFive</th>                                                  
         </tr>
      </thead>
      <tbody>
      </tbody>
</table>

I hope this will help you to solve your issue.

  • 发表于 2018-09-01 06:33
  • 阅读 ( 281 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除