Не удается просмотреть данные о предупреждении о наличии данных -DataTables: table id = tableData - PullRequest
Новая
       16

Не удается просмотреть данные о предупреждении о наличии данных -DataTables: table id = tableData

0 голосов
/ 04 июня 2019

вы можете подумать, что этот вопрос может быть дубликатом, но ни один из этих вопросов / решений не решил мою проблему,
1) Я использую liferay 6.2 и метод serverResource для извлечения данных с сервера и заполнения данных в плагине таблицы данныхи выполнение AUI-вызова AUI от клиента.
2) Я действительно предупредил полученный объект GSON, все выглядит хорошо, но я не вижу данных в таблице данных, и объект соответствует документам, но на 404 также появляется ошибкаприставка.

Пожалуйста, обратитесь к view.jsp и function getFormDataFromServer()

 <%@page import="com.liferay.portal.kernel.search.Document"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>
<%@page import="javax.portlet.ResourceURL"%>
<%@page import="javax.portlet.*" %>
<portlet:defineObjects />
<portlet:resourceURL var="serveResource">
</portlet:resourceURL> 

<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<head>
<!--links for this page -->
<%--<link href="<%=request.getContextPath()%>/css/bootstrap.css" rel="stylesheet">
 <script src="<%=request.getContextPath()%>/js/bootstrap.js" type="text/javascript"></script>--%>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/dataTables.bootstrap.min.css"></link>
 <script src="<%=request.getContextPath()%>/js/jQuery.js" type="text/javascript"></script> 
<%-- <script src="<%=request.getContextPath()%>/js/dataTables.bootstrap.min.js" type="text/javascript"></script> --%>
<script src="<%=request.getContextPath()%>/js/jquery.dataTables.min.js" type="text/javascript"></script>
</head>
<%-- <p>string from server=${initial_value}</p>  --%>
<button  class="btn btn-success btn-md"  id="getTableData" onclick="getFormDataFromServer()" >View Data</button>
<div id="tableDiv" style="margin-top:10px;margin-left:10px"></div>
<div id="divForm">
<form id="taskform">
<div class="form-group">         
    <label>Enter the details of a task</label>

    <label for="task">Name:</label>
    <input type="text" class="form-control" name="<portlet:namespace/>task"/>

    <label for="desc">description:</label>
    <input type="text" class="form-control" name="<portlet:namespace/>desc"/>

    <label for="user">User:</label>
    <input type="text" class="form-control" name="<portlet:namespace/>user"/>

    <label for="startdate">Start Date:</label>
    <input type="date" class="form-control" name="<portlet:namespace/>startdate"/>

    <label for="enddate">End Date:</label>
    <input type="date" class="form-control" name="<portlet:namespace/>enddate"/>

    <button class="btn btn-primary btn-md" onclick="sendFormData()" id="btnSubmit">Submit</button>
</div>
</form>
</div>
<script type="text/javascript"> 
$(document).ready(function(){
    //$('#getTableData').click(getFormDataFromServer());

});


function sendFormData()
{
    //var formdata_jSonObj=JSON.stringify($('#taskform').serializeArray());

        AUI().use('aui-io-request',function(A)
                {
                    A.io.request('${serveResource}',
                    {
                        method:'post',
                        data:{'<portlet:namespace/>action':'formdata'},
                        form:{
                            id:'taskform'
                        },
                        on:{
                                success:function()
                                {
                                    alert(this.get('responseData'));
                                },

                                failure:function()
                                {
                                    alert("error in ajax");
                                    }

                            }   
                    });
                }
            );

    }

    function getFormDataFromServer()
    {
        console.log("-------------------------------getFormDataFromServer method is called");
        var table="<table id='tableData' class='display table table-striped table-border' style:'width:100%'>";
        table+="<thead><tr>";
        table+="<th>Id</th>";
        table+="<th>Name</th>";
        table+="<th>start date</th>";
        table+="<th>end date</th>";
        table+="<th>created on</th>";
        table+="<th>description</th>";
        table+="<th>created by</th>";
        table+="</tr></thead></table>";
        $('#tableDiv').html(table);
        AUI().use('aui-io-request',function(A){
            A.io.request('${serveResource}',
             {
                method:'get',
                data:{'<portlet:namespace/>action':'getTableData'},
                on:{
                        success:function()
                        {
                            //alert(this.get('responseData'));
                            var data=this.get('responseData');
                            console.log(data);
                          //var tempdata=[{"id":"1","name":"tiger nixon","start_date":"23/4/2019","end_date":"23/4/2019","created_on":"23/4/2019","description":"thippu","created_by":"23/4/2019"}];
                            var obj={"ajax":data,"columns":[{"data":"id"},{"data":"name"},{"data":"start_date"},{"data":"end_date"},{"data":"created_on"},{"data":"description"},{"data":"user"}]};
                            //var obj={"ajax":data,"columns":[{data:'id'},{data:'name'},{data:'start_date'},{data:'end_date'},{data:'created_on'},{data:'description'},{data:'user'}]};

                            $("#tableData").DataTable(obj);
                        },
                    failure:function()
                    {
                        alert("ajax failure: cannot able to get the data from server, something went wrong");
                    }
                   }
            });
        });
    }
</script>

, как устранить эту ошибку: Предупреждение DataTables: table id = tableData - Ошибка Ajax.Для получения дополнительной информации об этой ошибке, см. http://datatables.net/tn/7
в этой документации: ссылка
Я не вижу, что не так, помогите мне найти ее.

Данные объекта GSON: 

[{"name":"testtaskname","description":"estst","user":"testuser","start_date":"2019-05-28","end_date":"2019-05-28","created_on":"2019-05-28","id":1},{"name":"testtaskname","description":"sdf","user":"sdf","start_date":"2019-05-28","end_date":"2019-05-28","created_on":"2019-05-28","id":2},{"name":"testtaskname","description":"fs","user":"testuser","start_date":"2019-05-28","end_date":"2019-05-28","created_on":"2019-05-28","id":3},{"name":"testtaskname","description":"df","user":"testuser","start_date":"2019-05-28","end_date":"2019-05-28","created_on":"2019-05-28","id":4},{"name":"add task","description":"updating the database","user":"thippu","start_date":"2019-05-28","end_date":"2019-05-28","created_on":"2019-05-28","id":5},{"name":"creating the datatable","description":"using bootstrap\u0027s","user":"thippu","start_date":"0032-11-06","end_date":"0033-11-07","created_on":"2019-05-28","id":6},{"name":"task10","description":"check","user":"thippu","start_date":"0032-11-06","end_date":"0033-11-07","created_on":"2019-05-28","id":7},{"name":"task11","description":"check","user":"thippu","start_date":"2019-05-27","end_date":"2019-05-28","created_on":"2019-05-28","id":8},{"name":"task12","description":"check","user":"thippu","start_date":"2019-05-27","end_date":"2019-05-28","created_on":"2019-05-28","id":9},{"name":"task13","description":"check","user":"thippu","start_date":"2019-03-13","end_date":"2019-05-17","created_on":"2019-05-28","id":10},{"name":"creating the datatable","description":"updating the database","user":"testuser","start_date":"2019-06-18","end_date":"2019-06-21","created_on":"2019-06-01","id":11},{"name":"abc task","description":"checking the servlet","user":"user","start_date":"2019-06-01","end_date":"2019-06-01","created_on":"2019-06-01","id":12},{"name":"task demo","description":"description of task is checking the code is reaching or not to server","user":"thippu","start_date":"2019-06-01","end_date":"2019-06-01","created_on":"2019-06-01","id":13},{"name":"task demo2","description":"checking the action value","user":"thippu","start_date":"2019-06-01","end_date":"2019-06-01","created_on":"2019-06-01","id":14},{"name":"task demo","description":"checking the data","user":"thippu","start_date":"2019-06-01","end_date":"2019-06-01","created_on":"2019-06-01","id":15},{"name":"task demo","description":"ggj","user":"thippu","start_date":"2019-06-01","end_date":"2019-06-01","created_on":"2019-06-01","id":16},{"name":"demo project","description":"description","user":"thippu","start_date":"2019-06-03","end_date":"2019-06-03","created_on":"2019-06-03","id":17}]

1 Ответ

0 голосов
/ 05 июня 2019

Я изменил некоторый код на часть jquery, и он работал нормально,
Ниже приведено решение:
В function getFormDataFromServer() при success изменение метода на: 

                        {

                            var tbldata=this.get('responseData');
                            tbldata=JSON.parse(tbldata);
                            console.log(tbldata);

                            var obj={"data":tbldata,"columns":[{"data":"id"},{"data":"name"},{"data":"start_date"},{"data":"end_date"},{"data":"created_on"},{"data":"description"},{"data":"user"}]};


                            $("#tableData").DataTable(obj);
                        },
...