25

Google Chrome の開発者ツールで次のエラーがスローされています。

キャッチされていない TypeError: 未定義のプロパティ 'className' を読み取ることができません

エラーがスローされているコードは次のとおりです。

var oTable = $('#resultstable').dataTable({
                            "bAutoWidth" : true,
                            "iDisplayLength" : 10,
                            "bFilter" : false,
                            "bLengthChange" : false
                        });

resultstable は、html 内のテーブルの ID です。

<table cellpadding="0" cellspacing="0" border="0" id="resultstable"
                    name="resultstable" class="display datatable">

奇妙なことに、table タグの後に if ステートメントがあります。テーブルは完全に正常に動作し、プログラムがelseif{}セクションに送信されるとCSSが正しく表示されますが、上記のエラーがスローされ、CSSがif{}セクションにある場合はCSSが適用されません.

助けてください！

4

7 に答える 7

51

他の答えは私を正しい軌道に乗せました。

もっと簡潔に言えば、エラーは、私が作成していたテーブルが間違っていたということでした。

ヘッダー列 (もちろん、スレッド内) が行列 (tbody 内) と一致しませんでした

私の状況では、ヘッダー内に列が多すぎました。

于 2012-08-20T20:24:26.093 に答える
10

Datatables では、html テーブルが完璧である必要があります。<th>との量が同じでない場合に、このエラーが発生することがわかりました<td>。余分なヘッダーがないことを確認してください。

于 2012-12-28T17:01:04.423 に答える
2

現在発生しているエラーと同じエラーが発生しました。Chosen ライブラリを使用して非常によく似たエラーに遭遇したことがあります。問題は (Chosen の場合)[]文字を含む ID が使用されていたため、JavaScript が CSS セレクターと ID の間で混乱していたことです (CSS では[]属性の指定に使用できることを思い出してください)。

ただし、DataTables の場合、DataTables スクリプト自体がclass = " "、tbody.

これは、php からの HTML 出力に論理エラーがあったためです。障害コード:

<?php
for ($currentRow = 0 ; $currentRow <= $query_length; $currentRow++) {
        ?>
        <tr>
        <?php
        list($job_id, $company_id, $job_title, $industry_id, $profession_int, $job_openings, $job_city, $job_salary_start, $job_end_date, $job_start_date, $job_skills, $company_name, $isConfidential, $job_experience_level) = dbRow($query_results, $currentRow);
      echo "<td class = \"detailed-job-row\">" . $job_title . "</td>";
      echo "<td class = \"detailed-job-row\">" . $company_name . "</td>";
      echo "<td class = \"detailed-job-row\">" . $industry_id . "</td>";
      echo "<td class = \"detailed-job-row\">" . $profession_int . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_openings . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_city . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_salary_start . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_end_date . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_start_date . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_skills . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_experience_level . "</td>";
      ?>
        </tr>
        <?php  
     } ?>
    </tbody>
  </table>
<?php
}
?>

長い、長いテーブルの一番下にエラーがあり、postgres が行 208 にジャンプできなかったことを示していi - 1ます$currentRow - 1。

したがって、修正された作業コードは次のとおりです。

<?php
for ($currentRow = 0 ; $currentRow <= $query_length - 1; $currentRow++) {
        ?>
        <tr>
        <?php
        list($job_id, $company_id, $job_title, $industry_id, $profession_int, $job_openings, $job_city, $job_salary_start, $job_end_date, $job_start_date, $job_skills, $company_name, $isConfidential, $job_experience_level) = dbRow($query_results, $currentRow);
      echo "<td class = \"detailed-job-row\">" . $job_title . "</td>";
      echo "<td class = \"detailed-job-row\">" . $company_name . "</td>";
      echo "<td class = \"detailed-job-row\">" . $industry_id . "</td>";
      echo "<td class = \"detailed-job-row\">" . $profession_int . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_openings . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_city . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_salary_start . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_end_date . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_start_date . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_skills . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_experience_level . "</td>";
      ?>
        </tr>
        <?php  
     } ?>
    </tbody>
  </table>
<?php
}
?>

この変更を実行すると、DataTables が適切に実行されるようになりました。

したがって、実用的な解決策を提供することはできませんが、問題の原因である可能性があるため、html マークアップを確認することをお勧めします (たとえば、テーブルに ? がありtbodyますか?)。

于 2012-07-31T18:06:05.833 に答える
2

私の特定のケースでは、要素の境界外の配列インデックスを使用して aTargets プロパティを設定しました。

$('.datatable').dataTable({
  aoColumnDefs: [
    {
      bSortable: false,
      aTargets: [0, 6]
    }
  ],
  aaSorting: []
});

これは、7 つの td 列があることを設定しましたが、6 つしかありませんでした。次のように変更すると、修正されました。

$('.datatable').dataTable({
  aoColumnDefs: [
    {
      bSortable: false,
      aTargets: [0, 5]
    }
  ],
  aaSorting: []
});
于 2013-10-09T14:20:03.140 に答える