[英]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. 我目前正在处理一个jsp项目,并且在显示通过ajax调用收集信息的jquery数据表时遇到一些问题。 The ajax call is gathering the correct data and I am not getting any errors or datatable warning alerts. ajax调用正在收集正确的数据,但没有收到任何错误或数据表警告警报。
here is my jsp file: 这是我的jsp文件:
<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: 这是javascript文件:
$(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: 这是从ajax调用中收集的数据:
[{ 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). 我也确实在jsp文件(css和js文件)中都包含了依赖项。 Thank you in advance! 先感谢您!
If your API doesn't set a Content-type: application/json
header, you need 如果您的API没有设置Content-type: application/json
标头,则需要
dataType: "json"
in your $.ajax
options. 在$.ajax
选项中。
I don't think you have any problems with your JSON or ajax request. 我认为您的JSON或ajax请求没有任何问题。 I created a fiddle based on your code snippet. 我根据您的代码片段创建了一个小提琴。
http://jsfiddle.net/sumeshnu/7yLn6pqt/ 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 https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js
this jquery library. 这个jQuery库。 Because you need to include the buttons.print.min.js
file as well if you want the print button. 因为如果需要打印按钮,还需要包括buttons.print.min.js
文件。
$(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. 希望这可以帮助您解决问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.