jquery - jqueryデータテーブルを使用してこのタイプのエラー「TypeError:oColumn is undefined」が発生する理由は、ドキュメントからすべて従った

Question

jqueryデータテーブルを使用してこのタイプのエラー「TypeError:oColumn is undefined」が発生する理由ドキュメントのすべての指示に従いました。何が悪いのかわからない？

firebug のエラー出力は次のとおりです。

ここに画像の説明を入力

これが私のhtmlテーブル構造です：

ここに画像の説明を入力

そして、ここに私が使用するjqueryコードがあります:

<style type="text/css" title="currentStyle">
    @import "datatables/media/css/demo_table.css";
</style>
<script src="datatables/media/js/jquery.dataTables.js"></script>
<script>
    $(document).ready(function() {
            $('#products-result').dataTable( {
                "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
            } );
            $.extend( $.fn.dataTableExt.oStdClasses, {
            "sWrapper": "dataTables_wrapper form-inline"
        } );
    } );
</script>

jquery によって生成されたテーブル:

$.ajax({
        url: 'get-products.php',
        type: 'post',
        datatype: 'json',
        data: { category: $('.category').val().trim(), keyword: $('.keyword').val().trim() },
        beforeSend: fnLoadStart,
        complete: fnLoadStop,
        success: function(data){
            var toAppend = '';

            toAppend += '<thead><tr><th>Name</th><th>Image</th><th>Price</th><th>Shipping</th><th>Weight</th><th>Dimension</th><th>ASIN</th><th>Description</th><th>Reviews</th><th>Category</th></tr></thead>';
            toAppend += '<tbody>';

            if(typeof data === "object"){
                for(var i=0;i<data.length;i++){

                    var price = '';
                    if(data[i]['price'] === null){
                        price = 'No Price Available';
                    }
                    else {
                        price = data[i]['price'][0];
                    }
                    var img = '';
                    if(data[i]['image'] === null){
                        img = '<img class="no-image" src="no-image.jpg" alt="">';
                    }
                    else {
                        img = '<img src="'+data[i]['image'][0]+'" alt="">';
                    }
                    var description = '';
                    if(data[i]['product_description'] == 'Not Available'){
                        description = data[i]['product_description'];
                    }
                    else {
                        description = data[i]['product_description'][0];
                    }

                    toAppend += 
                    '<tr><td><p>'+
                    data[i]['product_name'][0]+'</p></td><td>'+
                    img+'</td><td>'+
                    price+'</td><td><ul><li><span>Standard: </span>'+
                    data[i]['standard_shipping']+'</li><li><span>Expedited: </span>'+
                    data[i]['expedited_shipping']+'</li><li><span>Two-day: </span>'+
                    data[i]['twoday_shipping']+'</li><li><span>One-day: </span>'+
                    data[i]['oneday_shipping']+'</li></ul></td><td>'+
                    data[i]['weight']+'</td><td>'+
                    data[i]['dimension']+'</td><td>'+
                    data[i]['asin'][0]+'</td><td><p>'+
                    description+'</p></td><td><iframe src="'+
                    data[i]['reviews'][0]+'"></iframe></td><td>'+
                    data[i]['category'][0]+'</td></tr>';
                }

                toAppend += '</tbody>';

                $('.data-results').append(toAppend);
            }
        }
    });

HTML テーブル

<div>
    <table id="products-result" class="display data-results table table-striped table-hover table-bordered">

    </table>
</div>

ブラウザビューソース:

    <!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Products</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script src="js/main.js"></script>
    <script src="js/search.js"></script>

    <style type="text/css" title="currentStyle">
        @import "datatables/media/css/demo_table.css";
    </style>
    <script src="datatables/media/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function() {
                $('#products-result').dataTable( {
                    "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
                } );
                $.extend( $.fn.dataTableExt.oStdClasses, {
                "sWrapper": "dataTables_wrapper form-inline"
            } );
        } );
    </script>

</head>
<body>

<div>

    <div class="span7">
        <form class="form-inline">
            <select class="category">x
                <option>All</option>
                <option>Apparel</option>
                <option>Appliances</option>
                <option>ArtsAndCrafts</option>
                <option>Automotive</option>
                <option>Baby</option>
                <option>Beauty</option>
                <option>Blended</option>
                <option>Books</option>
                <option>Classical</option>
                <option>Collectibles</option>
                <option>DVD</option>
                <option>DigitalMusic</option>
                <option>Electronics</option>
                <option>GiftCards</option>
                <option>GourmetFood</option>
                <option>Grocery</option>
                <option>HealthPersonalCare</option>
                <option>HomeGarden</option>
                <option>Industrial</option>
                <option>Jewelry</option>
                <option>KindleStore</option>
                <option>Kitchen</option>
                <option>LawnAndGarden</option>
                <option>Marketplace</option>
                <option>MP3Downloads</option>
                <option>Magazines</option>
                <option>Miscellaneous</option>
                <option>Music</option>
                <option>MusicTracks</option>
                <option>MusicalInstruments</option>
                <option>MobileApps</option>
                <option>OfficeProducts</option>
                <option>OutdoorLiving</option>
                <option>PCHardware</option>
                <option>PetSupplies</option>
                <option>Photo</option>
                <option>Shoes</option>
                <option>Software</option>
                <option>SportingGoods</option>
                <option>Tools</option>
                <option>Toys</option>
                <option>UnboxVideo</option>
                <option>VHS</option>
                <option>Video</option>
                <option>VideoGames</option>
                <option>Watches</option>
                <option>Wireless</option>
                <option>WirelessAccessories</option>
            </select>
            <input class="keyword" type="text" placeholder="Keyword">
            <input type="button" class="btnresult btn" value="Generate">
        </form>
    </div>

    <div id="ajaxLoader">
        <img src="loading.gif" alt="">
    </div>

    <div>
        <table id="products-result" class="display data-results table table-striped table-hover table-bordered">

        </table>
    </div>

</div>

</body>
</html>

score 18 · Accepted Answer

少なくともヒントを得るために、これが皆さんの助けになることを願っています。

http://datatables.net/forums/discussion/comment/42607

私の問題は、 TypeError: col is undefined でした。

要約された回答:

テーブルの THead 要素内の TR 要素内の TH 要素の数は、テーブル内の TBody の TR 要素内の TD 要素の数 (またはテーブル行内の列の数) と等しくなければなりません。

以下の説明を読むことができます。

問題は、TBody セクション内の Tr 要素内の Td 要素として印刷する列の数と等しくなるように、thad セクション内に十分な Th または Td 要素を配置していなかったことです。

次のコードでエラーが発生しました。

<thead>
 <tr>
    <th> Heading 1</th>
    <th> Heading 2</th>
 </tr>
</thead>
<tbody>
 <tr>
    <td> Column 1 </td>
    <td> Column 2</td>
    <td> Column 3</td>
 </tr>
</tbody>"

しかし、Th 要素を THead 要素内の Tr 要素にもう 1 つ追加するだけで、魅力的に機能するようになりました。:)そして、上記のリンクからヒントを得ました。

また、jQuery DataTables によって必要なレベルまで有効な HTML であるため、THead の Tr 要素内のすべての TH 要素も TD 要素である可能性があることがわかりました。

時間を節約するために私があなたの何人かを助けたことを願っています! :)

score 4 · Accepted Answer

OK、ロード時にテーブルが空になっているようdatatablesです。最初から適切にフォーマットされていないため、機能しない可能性があります。したがって、ajaxを介してテーブルにデータを入力する前に、まず適切なHTMLを使用してテーブルを作成することをお勧めします。だからこれを作ってみてください

<div>
    <table id="products-result" class="display data-results table table-striped table-hover table-bordered">
            <thead><tr><th>Name</th><th>Image</th><th>Price</th><th>Shipping</th><th>Weight</th><th>Dimension</th><th>ASIN</th><th>Description</th><th>Reviews</th><th>Category</th></tr></thead>
    <tbody></tbody>
    </table>
</div>

次に、ajaxを介してに追加しますtbody

jquery - jqueryデータテーブルを使用してこのタイプのエラー「TypeError:oColumn is undefined」が発生する理由は、ドキュメントからすべて従った

3 に答える 3

Related

Reference