数据更新后jquery数据表不起作用

Question

我正在使用 ListView 列出 div 元素内的数据表。在父页面中，我使用 jquery .load() 在 div 中加载 ListView 模板。如果我使用 ajax 调用删除表中的条目并通过使用 .load() 调用 ListView 重新加载表，则表将失去其数据表功能（它被列为普通表而不是数据表，没有分页等）。我怀疑我在第二个 ajax 调用中遗漏了一些东西。

我的带有数据表的 ListView 模板。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> 
 <table class="table vr-mdl" id="contable">
                             <thead>
                              <tr>
                                  <th class="th-one">
                                   <button class="ml-10 bl-btn no-br no-lh np-col btn btn-sm btn-default-imp-white add-filter-btn" id="contactTabelView">
                                    <i class="material-icons v-sub">add</i>
                                   </button>
                                  </th>
                                  <th class="th-two">Basic Info</th>
                                  <!-- <th class="th-three">Company</th> -->
                                  <th class="th-four">Tags</th>
                                  <!-- <th class="th-five">Lead Score</th> -->
                                  <th class="th-six">
                                   <button class="bl-btn no-br no-lh np-col btn btn-sm btn-default-imp-white add-filter-btn" id="contactTabelView">
                                    <i class="material-icons v-sub">chevron_left</i>
                                   </button>
           <button class="bl-btn no-br no-lh np-col btn btn-sm btn-default-imp-white add-filter-btn" id="contactTabelView">
            <i class="material-icons v-sub">chevron_right</i>
           </button>
          </th>
                              </tr>
                             </thead>
                     <tbody id="list_contact_here" >
            {% for u in object_list %}                              
                              <tr class="odd-tr">
                                  <td>
                                   <label class='custom_check_container'>
                                    <input type='checkbox' class='select-all-radio a-c-b contact_ch' value="{{u.id}}" name='contact_checked'>
                                    <span class='custom_check'></span>
                                   </label>
                                  </td>

                                  <td class='slct_prfl' data-href="{% url 'contacts:view_profile' id=u.id %}">
                <img class='thumb-sm img-inital img-circle' title='Customer Success Team' data-name='CT' src='https://www.agilecrm.com/icons/service.svg' alt=''>
                <p>{{ u.first_name }}<br><small style='font-size:11px;'>mail</small>
                </p>
             </td>

                                  <td>
                                   <span class="contact_tag label bg-light dk text-tiny m-r-2 tags-l-h">Sample</span>
                                  </td>

                                  <td class='edit_option_contact'>
                                   <a class='contact-td-more dropdown-toggle' data-toggle='dropdown' aria-expanded='false'>
                                    <i class='material-icons'>more_horiz</i>
                                   </a>
                                   <ul class='contact-more-options dropdown-menu dropdown-menu1 pull-right' role='menu'>
                                    <li><a href='#' class='contact-more-edit'><i class='material-icons'>mode_edit</i><span>Edit</span></a>
                                    </li>
                                    <li><a href='#' class='contact-more-delete ignore-tr-click'><i class='material-icons ignore-tr-click'>delete</i><span class='ignore-tr-click'>Delete</span></a>
                                    </li>
                   <li><a href='#' class='contact-more-send-mail ignore-tr-click'><i class='material-icons ignore-tr-click'>email</i><span class='ignore-tr-click'>Send Email</span></a>
                   </li>
                   <li><a href='#' class='schedule-appoinment ignore-tr-click'><i class='material-icons ignore-tr-click'>date_range</i><span class='ignore-tr-click'>Schedule an appointment</span></a>
                   </li>
                   <li><a href='#noteModal' class='contact-more-add-note  ignore-tr-click'><i class='material-icons ignore-tr-click'>note_add</i><span class='ignore-tr-click'>Add Note</span></a>
                   </li>
                   <li><a href='#' class='contact-more-add-event  ignore-tr-click'><i class='material-icons ignore-tr-click'>event</i><span class='ignore-tr-click'>Add Event</span></a>
                   </li>
                   <li><a href='#' class='contact-more-add-deal  ignore-tr-click'><i class='material-icons ignore-tr-click'>monetization_on</i><span class='ignore-tr-click'>Add Deal</span></a>
                   </li>
               </ul>
             </td>
                              </tr>
           {% endfor %}
                             </tbody>
                         </table>

<script type="text/javascript">
 $(document).ready(function() {

     $('#contable').dataTable({
        "pageLength": 5,
        "autoWidth": false,
        "bLengthChange": false,
        "ordering": false,
        "info": false,
        "searching": false
     });

} );
</script>

以及父模板中的 ajax 调用。

function list_conts(){
    var url="{% url 'contacts:contlist'%}";
    $("#con_table").load(url);

   }

如何再次加载？非常感谢您的帮助。

Answer 1

由于您丢失了 DataTable 功能，控制台中应该有错误，这就是原因。
您已经在 document.ready() 之后成功配置了 DataTable。
然后，当您尝试再次加载并收到控制台错误时，您会丢失它。

对于重新加载数据，DataTable 有其内部的 reload() 函数，它应该用于刷新数据，同时保持您在启动 DataTable 时提供的设置。

但是，您可以通过调用您已有的相同 DataTable 设置函数来解决问题。当您的 lisview 重新加载完成时重复它。它将重新创建整个数据表对象。

Answer 2

确保在主页中包含 DT 库，不要在模板中使用$(document).ready()。此块中的代码不会使用 Ajax 执行。

或者，在加载事件回调中初始化您的 DT。无论如何，DT js 文件应该在主文件中而不是在模板中可用。

P.S：我正在使用手机应用程序，所以不要介意答案的简短