laravel 5.4和react.js引导表-未捕获的TypeError:$(...)。bootstrapTable不是函数

时间:2018-08-09 15:30:09

标签: javascript php laravel bootstrap-table

我需要帮助。我想知道为什么会收到此错误,以及如何解决。谢谢。

  

未捕获的TypeError:$(...)。bootstrapTable不是函数

它显示空白页。并在控制台中显示错误。 Console error

我的下面的代码。

welcome.blade.php

Index.php

Package.json

export default class Index extends Component {

    componentDidMount() {

          $('#table').bootstrapTable({
              columns: [{
                field: 'e_id',
                title: 'e_name'
              },{
                field: 'e_name',
                title: 'Name'
              }]
          });
    }

    render() {


        return (
          <div className="card">
              <div className="card-body">
                  <table id="table"></table>
              </div>
          </div>
        )
    }
}

if (document.getElementById('displayreact')) {
    ReactDOM.render(<Index />, document.getElementById('displayreact'));
}

welcome.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <!-- Latest compiled and minified CSS -->

        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">

    </head>
    <body>

        <div id="displayreact"></div>
        <script src="js/app.js"></script>



        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
    </body>
</html>

0 个答案:

没有答案