jQuery 数据表未加载其功能

Question

数据table 未加载其功能

function loadmaincattable(){
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("loadmaincat").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("POST","category-mang/ajax/category-table.php",true);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send(null);
       }

下面是我的category-table.php文件

<div class="panel-body">
<div class="table-responsive">
    <table id="datatable1" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>Category Name</th>
                <th>Update</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
<?php include("../../All-In-One/select/selectclass.php");
@session_start();
ob_start();
?>
<?php
error_reporting(E_ALL);

$i = 0;$id=1;
$main_array = array();

$select = new SelectQuery();

// simple select query start

$table        = "mojo_cart_category";   // table name
$columns      = "*";                    // table columns name
$where        = "";                     // where condition
$orderby      = "mcat_id";              // orderby column name
$orderbyorder = "DESC";                 // orderby order: ASC/DESC
$limit        = "";                     // set limit

//Don't Change below code, Change at Your Own Risk.

$cnt = $select -> selectCountData($table,$columns,$where);

if($cnt > 0)
{
    $sql = $select ->     selectData($table,$columns,$where,$orderby,$orderbyorder,$limit);
    foreach ($sql as $row_sql)
    {
?>
              <tr>
                <td><?php echo $id; ?></td>
                <td><?php echo $row_sql['mcat_name']; ?></td>
                <td><?php echo "<a href='category-mang/update-category.php?mid=".$row_sql['mcat_id']."' target='_blank'>Update</a>"; ?></td>
                <td><a href='javascript:deleteMainCat(<?php echo $row_sql['mcat_id']; ?>)'>Delete</a></td>
            </tr>
   <?php    
        $id++;
        }
     }
       ?>

                </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#datatable1').dataTable({
            "sPaginationType" : "bs_four_button"
        });
        $('#datatable1').each(function() {
            var datatable = $(this);
        // SEARCH - Add the placeholder for Search and Turn this into in-line form control
            var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
        search_input.attr('placeholder', 'Search');
            search_input.addClass('form-control input-sm');
        // LENGTH - Inline-Form control
            var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
            length_sel.addClass('form-control input-sm');
        });
    });
</script>

我正在使用 javascript-ajax 来获取主文件中的数据table

我从 table 和数据 table 获得了所有记录

但没有得到数据的特征table。

谁能帮帮我

Answer 1

从 category-table.php 中的 <script> 部分删除 $(document).ready(function() { :

<script type="text/javascript">
   $('#datatable1').dataTable({
      "sPaginationType" : "bs_four_button"
   });
   ...
</script>

原因：DOM 在 AJAX 请求完成时已经加载，因此 ready() 永远不会在您的 <script> 部分中触发 == 数据表是从未初始化。除此之外，ready() 是不必要的 - AJAX 请求中包含的脚本将自动执行。

jQuery 数据表未加载其功能

jQuery dataTables not loaded wth its features

php

jquery

datatables