DataTables 警告:table id=table_id - 无法重新初始化 DataTable

问题描述

我正在使用 sqlAlchemy 使用 MysqL 处理 Flask .. 它在数据表上工作正常.. 但我的问题是,当启动服务器或添加新条目时,我收到以下消息错误

DataTables warning: table id=table_id - Cannot reinitialise DataTable

有什么我可以做的事情来解决问题......提前致谢..

在这里你会找到我的 >>>> base.html

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .paginate_button{
            padding: 5px 8px;
            margin: 5px;
            border-radius: 5px;
            cursor: pointer;
                    }
        .current{
            background-color: lightgreen;
        }
    </style>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5paxtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
          crossorigin="anonymous">
    <link href="http://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
    <Meta charset="UTF-8">
    <title>{% block title %} {% endblock %} </title>
</head>

<body>

    {% block body %} {% endblock %}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Test  -->

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
    <script src="http://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function () {
            $('#table_id').DataTable(
                {
               sPaginationType: "full_numbers",lengthMenu: [[10,25,50,100],[10,100]],columns: [
                    { "data": "id" },{ "data": "statename" },{ "data": "itpcbb" },{ "data": "vlanid" },{ "data": "firstip" },{ "data": "secondip" },{ "data": "scisswip" },{ "data": "notes" },{ "data": "actions" },]
                }
            );
        });
    </script>


</body>

</html>

在这里你会找到我的 >>>> index.html

{% extends 'base.html' %}
{% include 'header.html' %}



{% block title %} Home {% endblock %}



{% block body %}

<div class="container">
    <div class="row">
        <div class="col md-12">

            <div class="jumbotron p-3">

                <h2>Manage <b>IP's </b>  <button type="button"  class="btn btn-success float-right"
                data-toggle="modal" data-target="#mymodal">Add New information</button> </h2>


                {% with messages = get_flashed_messages() %}

                {% if messages %}

                {% for message in messages %}

                <div class="alert alert-success alert-dismissable" role="alert">

                    <button type="button" class="close" data-dismiss="alert" aria-label="close">

                        <span aria-hidden="true">x</span>

                    </button>


                {{message}}


                </div>


                {% endfor %}

                {% endif %}
                {% endwith %}


               <!--<table class="table table-hover table-dark"> -->
                <table id="table_id" class="table table-striped table-dark">

                    <thead>
                     <tr>
                        <th>ID</th>
                        <th>State_Name</th>
                        <th>ITPC/BB</th>
                        <th>VLAN_ID</th>
                        <th>First_IP</th>
                        <th>Second_IP</th>
                        <th>SCIS_SW_IP</th>
                        <th>Notes</th>
                        <th>Action</th>

                    </tr>
                    </thead>


                   {% for row in information %}
                    <tr>
                        <td>{{row.id}}</td>
                        <td>{{row.statename}}</td>
                        <td>{{row.itpcbb}}</td>
                        <td>{{row.vlanid}}</td>
                        <td>{{row.firstip}}</td>
                        <td>{{row.secondip}}</td>
                        <td>{{row.scisswip}}</td>
                        <td>{{row.notes}}</td>

                        <td>

                            <a href="/update/{{row.id}}" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#moDaledit{{row.id}}"> <i class="fa fa-pencil"></i> Edit</a>
                            <a href="/delete/{{row.id}}" class="btn btn-danger btn-xs" onclick="return confirm('Are You Sure To Delete ?'),confirm('The information will delete permanently !!!')"> <i class="fa fa-trash-o"></i> Delete</a>


                        </td>

                    </tr>


                  <!-- Modal Edit information-->
<div id="moDaledit{{row.id}}" class="modal fade" role="dialog">
   <div class="modal-dialog">


      <div class="modal-content">


         <div class="modal-header">


            <h4 class="modal-title">Update information</h4>


         </div>


         <div class="modal-body">


            <form action="{{url_for('update')}}" method="POST">


               <div class="form-group">


                  <label>State_Name:</label>
                   <input type="hidden"  name="id" value="{{row.id}}">

                  <input type="text" class="form-control" name="statename" value="{{row.statename}}">


               </div>



               <div class="form-group">


                  <label>ITPC/BB:</label>

                  <input type="text" class="form-control" name="itpcbb" value="{{row.itpcbb}}" list="list">
                   <datalist id="list">
                     <option value="BB">
                     <option value="ITPC">
                   </datalist>


               </div>


               <div class="form-group">


                  <label>VLAN_ID:</label>

                  <input type="text" class="form-control" name="vlanid" value="{{row.vlanid}}">


               </div>

                <div class="form-group">


                  <label>First_IP:</label>

                  <input type="text" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" class="form-control" name="firstip" value="{{row.firstip}}">


               </div>

                <div class="form-group">


                  <label>Second_IP:</label>

                  <input type="text" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" class="form-control" name="secondip" value="{{row.secondip}}">


                </div>


                <div class="form-group">


                  <label>SCIS_SW_IP:</label>

                 <!-- <input type="text" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" class="form-control" name="scisswip" value="{{row.scisswip}}"> -->
                 <input type="text" class="form-control" name="scisswip" value="{{row.scisswip}}">


                </div>


                <div class="form-group">


                  <label>Notes:</label>

                  <input type="text" class="form-control" name="notes" value="{{row.notes}}">


                </div>


               <div class="form-group">


                  <button class="btn btn-primary" type="submit">Update</button>


               </div>


            </form>


         </div>


         <div class="modal-footer">


            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>


         </div>


      </div>


   </div>

</div>


                    {% endfor %}


                </table>


            </div>



                  <!-- Modal Add information-->


<div id="mymodal" class="modal fade" role="dialog">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">

            <h4 class="modal-title">Add information</h4>
         </div>
         <div class="modal-body">

            <form action="{{url_for('insert')}}" method="POST">


               <div class="form-group">

                  <label>State_Name:</label>
                  <input type="text" class="form-control" name="statename" required="1">


               </div>


                <div class="form-group">


                  <label>ITPC/BB:</label>
                  <input type="text" class="form-control" name="itpcbb" required="1" list="list">
                  <datalist id="list">
                    <option value="BB">
                    <option value="ITPC">
                  </datalist>


               </div>


                <div class="form-group">


                  <label>VLAN_ID:</label>
                  <input type="number" class="form-control" name="vlanid" required="1">


               </div>


                <div class="form-group">


                  <label>First_IP:</label>
                  <input type="text" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" class="form-control" name="firstip" required="1">


               </div>

                <div class="form-group">


                  <label>Second_IP:</label>
                  <input type="text" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" class="form-control" name="secondip" required="1">


               </div>

                <div class="form-group">


                  <label>SCIS_SW_IP:</label>
                 <!-- <input type="text" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" class="form-control" name="scisswip" required="1"> -->
                  <input type="text" class="form-control" name="scisswip" placeholder="N/A"  value="N/A">

               </div>


               <div class="form-group">


                  <label>Notes:</label>
                  <input type="text" class="form-control" name="notes" required="0">


               </div>


               <div class="form-group">


                  <button class="btn btn-primary" type="submit">Add information</button>


               </div>


            </form>


         </div>


         <div class="modal-footer">


            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>


         </div>


      </div>


   </div>


</div>





        </div>

    </div>


</div>



{% endblock %}

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)