簡體   English   中英

如何將JavaScript變量中的數據JSON插入數據表

[英]How to insert data JSON in JavaScript variable to datatable

我有來自ajax jQuery的數據JSON結果,我將其保存在變量中,然后要將變量中的JSON插入到datatable中,但是現在該插入是來自url的數據json。

我試圖用變量結果myjson更改變量值,但仍然無法正常工作。 這是我的代碼:

的JavaScript

<script>
    var myTable = $('#my_logs').DataTable({
        "paging": true,
        "lengthChange": true,
        "searching": true,
        "ordering": true,
        "info": true,
        "autoWidth": true,
        "data": [],
        "columns": [{
            "title": "Date",
            "data": "log_time"
        }, {
            "title": "User Name",
            "data": "user_name"
        }, {
            "title": "Class",
            "data": "class_name"
        }, {
            "title": "Function",
            "data": "class_function"
        }, {
            "title": "Action",
            "data": "action_title"
        }, {
            "title": "Description",
            "data": "action_description"
        }]
    });

    $(document).ready(function() {
        $("#search").click(function() {
            var start_date = $('#start_date').val();
            var end_date = $('#end_date').val();
            console.log(start_date);
            console.log(end_date);                

            if(startDate != '' && endDate !='')
            {
                var startDate = new Date(start_date);
                var endDate = new Date(end_date);
                let url = 'http://localhost/APICI/index.php/api/cektable';
                    fetch(url)
                    .then(res => res.json())
                    .then((out) => {
                        var resultProductData = out.filter(function(a) {
                            var createdAt = new Date(a.log_time);
                            if( createdAt >= startDate && createdAt <= endDate ) 
                            return a; 
                        });
                        console.log(resultProductData);
                        $.ajax({
                            url: 'http://localhost/APICI/index.php/api/cektablee',
                            data: {
                                json: JSON.stringify(resultProductData)
                            },
                            type: "POST",
                            timeout: 30000,
                            dataType: "json", // "xml", "json"
                            success: function(logs) {
                                myTable.clear();
                                $.each(logs, function(index, value) {
                                    myTable.row.add(value);
                                });
                                myTable.draw();
                            },
                            error: function(jqXHR, textStatus, ex) {
                                alert(textStatus + "," + ex + "," + jqXHR.responseText);
                            }
                        });
                    })
                .catch(err => { throw err });
            }
            else
            {
                alert("Both Date is Required");
            }
        });
    });
</script>

我想向datatable插入哪個是變量resultProductData中的 json值,但是現在結果是來自ajax http://localhost/APICI/index.php/api/cektablee中 url的 json

這是來自變量resultProductData json數據結果var的結果json,但這是datatable json數據結果url中的結果

這可能會幫助您:

經過測試並且數據正確添加,如果有任何查詢,請告知我

 <!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href=" https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css"> <!-- jQuery --> <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script> <!-- DataTables --> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> <html> <body> <div class="container"> <table id="my_logs" class="table table-striped table-bordered" style="width:100%"> <thead> </thead> <tbody> </tbody> </table> </div> </body> <script type="text/javascript"> $(document).ready(function () { var myTable = $('#my_logs').DataTable({ "paging": true, "lengthChange": true, "searching": true, "ordering": true, "info": true, "autoWidth": true, "data": [], "columns": [{ "title": "Date", "data": "log_time" }, { "title": "User Name", "data": "user_name" }, { "title": "Class", "data": "class_name" }, { "title": "Function", "data": "class_function" }, { "title": "Action", "data": "action_title" }, { "title": "Description", "data": "action_description" }] }); var logs = [{ "log_time": "2019-08-27", "user_name": "Me", "class_name": "login", "class_function": "authentication", "action_title": "User login", "action_description": "I am logged in" }, { "log_time": "2019-08-17", "user_name": "me", "class_name": "dashboard", "class_function": "index", "action_title": "Admin dashboard", "action_description": "I am logged in" }]; myTable.clear(); $.each(logs, function(index, value) { myTable.row.add(value); }); myTable.draw(); }); </script> </html> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM