jQuery 数据表发送 JSON 搜索参数答案

【问题标题】：jQuery datatables send JSON search parameterjQuery 数据表发送 JSON 搜索参数
【发布时间】：2019-03-04 08:27:16
【问题描述】：

我正在加载一个数据表。我想发送一个具有 3 个参数的 json，这将是加载数据的搜索参数。我无法通过数据表发送搜索 json 参数，但使用 ajax 调用它可以工作。使用 Ajax 调用来展示银行端的工作。

var bankReconFD = new FormData();
var searchData = {};

searchData.account = $('[name="bankCoa"]').val();
searchData.fromDate = $('[name="reconFromDate"]').val();
searchData.toDate = $('[name="reconToDate"]').val();        
console.log('the search data is :',JSON.stringify(searchData));

bankReconFD.append("bankReconFD", JSON.stringify(searchData));

然后我把这个json参数发送到java spring boot后端，加载数据

reconGetDataTable = $('#bankReconDataListing').DataTable({
    "language": __DT,
    "select": true,
    "order": [[1, "desc"]],
    "searchable": true,
    "destroy": true,
    "sAjaxSource": '/bankReconciliationGetData/' + bankReconFD,
    "sAjaxDataProp": "",
    "bLengthChange": false,
    "pageLength": 20,
    "aoColumns": [
    ],
    "columnDefs": [
        {
            "targets": [0, 1, 2, 3, 4, 5, 6],
            "className": "text-center"
        }
    ],
    "initComplete": function(){
        initiateDatatablesModifications();
    }
});

我收到以下错误：

{"timestamp":1551687850311,"status":404,"error":"Not Found","message":"No message available","path":"/bankReconciliationGetData/[object%20FormData]"}

以下效果很好

var bankReconFD = new FormData();
var searchData = {};
searchData.account = $('[name="bankCoa"]').val();
searchData.fromDate = $('[name="reconFromDate"]').val();
searchData.toDate = $('[name="reconToDate"]').val();        

bankReconFD.append("bankReconFD", JSON.stringify(searchData));

$.ajax({
    type: 'POST',
    url: '/bankReconciliationGetData',
    data: bankReconFD,
    contentType: false,
    processData: false,
    success: function (data) {
        alert('successs');
    },
    error: function (data) {

    },
});

【问题讨论】：

标签： javascript java jquery spring-boot datatables

【解决方案1】：

您好，您可以这样做：

exampleTable = $('#exampleTable').DataTable();
if ($.fn.DataTable.isDataTable("#exampleTable")) {
    exampleTable.destroy();
    $('#exampleTable tbody').remove();
} // check if table exist and destroy previous data set

//create the dataTable
exampleTable = $('#exampleTable').DataTable({
         "destroy": true,
         "responsive":{
           "details": {
           renderer: function ( api, rowIdx, columns ) {
             var data = $.map( columns, function ( col, i ) {
               return col.hidden ?
                 '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                   '<td>'+col.title+':'+'</td> '+
                   '<td>'+col.data+'</td>'+
                 '</tr>' :
                 '';
             } ).join('');
             ///the render helps to wrap the columns when responsive mode is on if you want to use it download datatbles.responsive.js
             return data ?$('<table/>').append( data ) :false;
           }
         }
       },
         "autoWidth": false,
               "ajax": {
                   "url": 'yourURL',
                   "method": 'POST',
                   data:{action:id} // put your parameters here
               },
               "columns": [
                   {"data": "id"},
                   {"data": "fullname"},
                   {"data": "address"},
                   {"data": "company"},
                   {"data": "Cars"},
                   {
                className: "center",
                defaultContent:"<a name='idClient' class='btn btn-info' ><span class='glyphicon glyphicon-list-alt'></span> Show Cars Info</a>"
              }
               ],
               "language":{"url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"},
                 "columnDefs": [
                   {
                     "className": "dt-center", "targets": "_all"
                    }
                 ]
           }
         );//end get table

希望对你有帮助

【讨论】：