0
私のアプリでは特異な状況があります。jQueryデータテーブルのエラー7：404のアプリの読み込み
私は新しいセクションを追加しました。結果を表示するには、jQuery Data Tableを使用する必要があります。
は、アプリのロードで、私は私のテーブルに関する警告エラーを得た：のDataTable警告：テーブルID = scansdetailsdata - Ajaxのエラー。私は、すべての最初の、だから、
http://localhost:8080/getscans.json：このエラーの詳細 については、http://datatables.net/tn/7
は、だから私はFirefoxのコンソールが私に言うと、私はURLに404エラーを得たものを見ている参照してください。私のデータテーブルのajaxパラメータと私のコントローラーの@PostMappingの値をチェックしても問題ないと思う。
奇妙なことに私のアプリを使用して、そのUR1に表示する必要のあるデータをクエリすると、アプリケーションは問題なく完全に動作します。データの表示、編集、変更の保存問題なく。これは私が以前にこのような状況に遭遇したときに、とにかくアプリケーションを使用しようとすると正しく動作しないため、特に感銘を受けました。
とにかく、これは「有罪」コードです。
データテーブルによって移入表：
<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
<script type="text/javascript" class="init" src="../../static/js/custom/scansdetailsdatatable.js"></script>
<script type="text/javascript" class="init" src="../../static/js/custom/moment.js"></script>
<div class="container" align="center">
<h1>Scans Details List</h1>
<table class = "table table-bordered" id="scansdetailsdata">
<thead>
<tr>
<th>Scan Items ID</th>
<th>Edit</th>
<th>Tag</th>
<th>Date</th>
<th>Status</th>
<th>Closing Date</th>
<th>Host</th>
<th>Port</th>
<th>Severity</th>
<th>Plugin ID</th>
<th>Info</th>
<th>Notes</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="myModalForScansSearch" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Editing Menu</h4>
</div>
<div class="modal-body">
<form id="updatescansearchform" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label"
for="inputNotes">Notes</label>
<div class="col-sm-10">
<input type="text" class="form-control"
id="newscanitemsnote" name ="newscanitemsnote" placeholder="Put here the note"/>
</div>
</div>
<div class="form-group">
<label for = "type" class = "col-sm-2 control-label">Status</label>
<div class = "col-sm-10">
<select class = "form-control" id = "newscanitemsstatus" name="newscanitemsstatus">
<option value="open">open</option>
<option value="closed">closed</option>
</select>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success" data-dismiss="modal">Save</button>
</div>
</div>
</div>
データテーブルコード：
/**
* This script define the use of jquery DataTable for scans response,
* used to format faster and simpler the table showed in table.
*
* @author cte0324
*/
var DTscans = false;
var id_scan_items = 0; //this variable is used to check the data column id and pass it to controller via ajax
var closing_date; //this variable is used to set up the closing date of events after System Administrator action.
$(document).ready(function() {
DTscans = $('#scansdetailsdata').DataTable(
{
"serverSide": true,
"ajax":{
url: "../getscans.json",
type: "post",
"data": function (d)
{
var param = {tag : $('#tag').val(), scanstatus : $('#scanstatus').val(), scanseverity : $('#scanseverity').val(), scanhost: $('#scanhost').val(),
scanport: $('#scanport').val(), pluginid: $('#pluginid').val(), scaninfo : $('#scaninfo').val()};
return $.extend(d, param);
}
},
"columnDefs": [
{
"targets": [ 0 ],
"visible": false
}],
"columns": [
{ "data": "id" },
{ "data": null,
"render": function (data, type, full, meta) {
return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-target='#myModalForScansSearch' onclick=\'id_scan_items="+data.id+"\'> Edit </button>";
}
},
{ "data": "scans_name" },
{ "data": "scans_date",
"render": function(data){
return (moment(data).isValid()) ? moment(data).format("DD MMM YY") : "-";}
},
{ "data": "status" },
{ "data": "closing_date",
"render": function(data){
return (moment(data).isValid()) ? moment(data).format("DD MMM YY") : "-";}
},
{ "data": "name" },
{ "data": "port" },
{ "data": "severity" },
{ "data": "pluginID" },
{ "data": "info" },
{ "data": "note" }
]
});
//This function is used to send the form data to Spring controller; cause we use a modal, with code that must be put in the file with html table head,
//we must replace the use of view made by jsp using an ajax function
$('#myModalForScansSearch').on('click', '.btn.btn-success', function(event) {
var form = $('#updatescansearchform'); //recover the form inside modal by using id
var formdata = form.serializeObject(); //use the serializeObject function to prepare data for Json format
closing_date = new Date().getTime(); //set up the closing date with the current date
formdata.idscanitems = id_scan_items; //add the event id to form data, after setting it with the IDnumber variabile
formdata.new_closing_date = closing_date; //add the closing date to form data
console.log(formdata, this);
event.preventDefault();
//here starts the code to sending data to Spring controller
$.ajax({
url: "../updatescannoteandstatus.json",
type: "post",
data: formdata,
success : function() {
console.log("Invio riuscito.");
console.log(moment(closing_date).format('DD/MM/YYYY'));
DTscans.ajax.reload(null, false); //we reload the table, showing immediately the data updated.
}
});
});
});
春コントローラー：
/**
* Return the details of scans, based on joining scans with
* scan_items and hosts.
*
* @param model
* @param request
* @param name
* @param type
* @param date
* @return
* @throws IOException
*/
@PostMapping(value="/getscans.json")
@ResponseBody
public ModelAndView getScansDetails(ModelAndView model, HttpServletRequest request,
@RequestParam(name="tag") String tag,
@RequestParam(name="scanstatus") String scanstatus,
@RequestParam(name="scanseverity") String scanseverity,
@RequestParam(name="scanhost") String scanhost,
@RequestParam(name="scanport") String scanport,
@RequestParam(name="pluginid") String pluginid,
@RequestParam(name="scaninfo") String scaninfo) throws IOException
{
//First, we pass the data to DAO method
List<ScanItems> listScanItems = networks.joinScanItemsAndScansAndHosts(tag, scanhost, scanport, scanstatus, scanseverity, pluginid, scaninfo);
//Second, we put results in the model, with a map, and set properties for jquery datatables
model.addObject("recordsTotal", listScanItems.size());
model.addObject("recordsFiltered", listScanItems.size());
model.addObject("data", listScanItems);
//Finally, we return the model
return model;
}
あなたはその他の詳細が必要な場合は、「私と私を教えてくださいそれらを提供するでしょう。