嵌套的数据表在按钮上单击后通过api调用重新加载

时间:2019-03-20 05:43:36

标签: javascript jquery json ajax datatables

我正在使用嵌套的数据表并调用ajax post api。当我在文本框中输入“ no”时,会在console.log中得到响应,但数据表未显示结果。我在单击按钮时重新加载数据表时遇到问题

单击按钮时,文本框值将以api作为参数发送。

这是我的代码段:
HTML代码

<table class="table table-striped table-hover trip_unmacthed" id="passenger">
 <thead>
  <tr>
      <th></th>
      <th>Req No</th>
      <th>Trip ID</th>
      <th> Name</th>
  </tr>


js代码

    $(document).ready(function () {
    $.fn.dataTable.ext.errMode = 'throw';
    var table;
    var obj = '1';
    $("[id*=btnsubmit]").click(function () {
        obj = $.trim($("[id*=lasttrip]").val());
        reloadDT(obj);
    });

    function reloadDT() {
        $.ajax({
            url: 'http://localhost:7001/api/v1/allGetCalls',
            type: 'POST',
            data: {
                api: 'ts_p_unmatched',
                params: +obj
            },
        })
    }

    function format(driver_data) {
        var a = '';
        var b = '';
        var i;
        for (i = 0; i < driver_data.length; i++) {
            var date = new Date(driver_data[i].starttime);
            var month = date.getMonth() + 1;
            ps = (month.length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear() + " - " + date.getHours() + ":" + date.getMinutes();
            a = '<table class="table table-striped table-bordered table-hover"style="padding-left:0px;">' + '<thead> <tr> <th>Trip Id</th> <th>Name</th> <th>Source</th> <th>Destination</th> <th>Date/Time</th> </tr> </thead>' + '<tbody>';
            b = b + '<tr>' +
                '<td>' + driver_data[i].d_tripid + '</td>' +
                '<td>' + driver_data[i].employeename + '</td>' +
                '<td>' + driver_data[i].srclocation + '</td>' +
                '<td>' + driver_data[i].destlocation + '</td>' +
                '<td>' + ps + '</td>' +
                '</tr>';
        }
        var final = a + b + '</tbody></table>';
        return final;
    }
    table = $('#passenger').DataTable({

        "ajax": {
            url: 'http://localhost:7001/api/v1/allGetCalls',
            type: 'POST',
            data: {
                api: 'ts_p_unmatched',
                params: +obj
            },
            "dataSrc": "passenger_data",
        },
        statusCode: {
            500: function () {
                alert("Script exhausted");
            }
        },
        "columns": [
            {
                "className": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": ''
                        },
            {
                "data": "request_id"
                        },
            {
                "data": "p_tripid"
                        },
            {
                "data": "employeename"
                        },
            {
                "data": "srclocation"
                        },
            {
                "data": "destlocation"

                        },
            {
                "data": 'starttime',
                "render": function (data) {
                    var date = new Date(data);
                    var month = date.getMonth() + 1;
                    return (month.length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear() + " - " + date.getHours() + ":" + date.getMinutes();
                }
            },
            {
                data: null,
                className: "center",
                defaultContent: '<a href="JavaScript:void(0);" class="editor_edit" id="opendetails">View</a>'
            }, ],

        "order": [[1, 'asc']],
        "bDestroy": true,

        "columnDefs": [

            {
                "targets": [1],
                "visible": false,
            }

        ],

    }).ajax.reload();
    // Add event listener for opening and closing details
    $('#passenger tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            // Open this row

            row.child(format(row.data().driver_data)).show();
            tr.addClass('shown');
        }
    });
    $('#passenger tbody').on('click', 'a', function fn1() {
        var data = table.row($(this).parents('tr')).data();
        localStorage.setItem("passengerreqid", data.request_id)
        window.open('unmatch-details.html', "_blank");
    });
});

0 个答案:

没有答案