DataTable显示错误"表格中没有可用的数据"

时间:2018-06-05 09:55:01

标签: javascript reactjs datatables

我在我的用户列表中使用了DataTable组件来显示存储在我的数据库中的数据。

这是我的global.js文件



import React, { Component } from 'react';
import $ from 'jquery';
import DataTable from 'datatables.net';


function filterGlobal () {
    $('#example').DataTable().search(
        $('#global_filter').val()
    ).draw();
}


$(document).ready(function() {
    $('#example').DataTable();
 
    $('input.global_filter').on( 'keyup click', function () {
        filterGlobal();
    } );

} );


class Global extends React.Component {
  constructor(props){
        super(props);
        this.state={
            users:[],
            isLoaded:false,
            errorOnLoad:false
        };
        
    }
    getuser(){
        fetch('/api/users/getuser',{
            method:'get'
        })
            .then((response)=>{
                return response.json()

            })
            .then((data)=>{
                this.setState({
                    users:data,
                    isLoaded:true,
                    err:{},
                    errorOnLoad:false,
                });
                this.getuser.bind();
            })
            .catch((err)=>{
                this.setState({
                    err:err,
                    errorOnLoad:true
                })

            })
    }

    componentDidMount(){
        this.getuser();
    }



  render() {
    return (
      <div>
      <h2 className="contact-table">CONTACT LIST</h2>
        <table>
          <tbody>
            <tr id="filter_global" style={{display: 'flex', justifyContent: 'flex-end'}}>
              <td style={{width: '100px', alignSelf: 'center'}}>Global search</td>
              <td  align="center"><input type="text" className="global_filter" id="global_filter" style={{width: 'auto',border: '1px solid',marginBottom: '0px'}} /></td>
            </tr>
          </tbody>
        </table>
        <table id="example" className="display" style={{width: '100%'}}>
          <thead>
            <tr>
              <th>Name</th>
              <th>Email Address</th>
              <th>Mobile Number</th>
              <th>Message</th>
              <th>Profile Photo</th>
            </tr>
          </thead>
          <tbody>
            {
                this.state.users.map((user)=>(
                    <tr key={user.qid}>
                        <td>{user.name}</td>
                        <td>{user.emailAddress}</td>
                        <td>{user.mobileNumber}</td>
                        <td>{user.message}</td>
                        <td><img className="image-db" src={user.image} alt="" /></td>
                    </tr>
                ))
            }
          </tbody>
          
        </table>
      </div>

    );
  }
}

export default Global;
&#13;
&#13;
&#13;

这是我打开它时的显示页面。刷新页面或向表中添加新数据后发生错误。

Its working when i open the page

当我刷新页面数据表不起作用并显示错误。 但我得到的所有数据和表格中没有数据

的错误

This is the page where i am getting the error

谁能告诉我出了什么问题。

三江源。

0 个答案:

没有答案