Question

我正在使用ListView列出div元素内的数据表。在父页面中，我正在使用jquery .load（）在div中加载ListView模板。如果我使用ajax调用删除表中的条目并通过使用.load（）调用ListView重新加载表，则该表将失去其datatable功能（它被列为普通表，而不是datatable，没有分页等）。我怀疑我在第二个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文件应该在主文件中可用，而在模板中不可用。

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

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

2 个答案: