programing

j수정 방법 정의되지 않은 '_DT_CellIndex' 속성을 설정할 수 없습니까?

iphone6s 2023. 10. 4. 21:03
반응형

j수정 방법 정의되지 않은 '_DT_CellIndex' 속성을 설정할 수 없습니까?

저는 Jquery에 처음 왔는데 사용자가 새 행을 추가하고 "아주터" 버튼을 클릭하면 데이터베이스에 추가된 후 테이블을 자동으로 다시 로드하고 싶습니다.실행하면 데이터베이스에 데이터가 성공적으로 추가되었지만 "tablebqup"는 더 이상 다시 로드되지 않고 다음 오류가 발생합니다.

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined

새 요소를 추가하는 기능은 다음과 같습니다.

    $("#newbq").click(function () {
    var indexadd= $('table#tablebqup tr:last').index() + 1;
    //Now add this row to the table:
    var row='<tr><td></td><td  contenteditable="true"></td><td  contenteditable="true"></td><td  contenteditable="true"></td><td  contenteditable="true"></td><td  contenteditable="true"></td><td colspan="2"> <button id="add'+indexadd+'" class="btn btn-info addbc" name="button">Ajouter</button> </td></tr>';
    $('#tablebqup').append(row);
    $(".addbc").click(function () {
      var nombc=($(this).parent().parent().find('td:eq(1)').html());
      var abrv= ($(this).parent().parent().find('td:eq(2)').html());
      var sigsoc=($(this).parent().parent().find('td:eq(3)').html());
      var telf=($(this).parent().parent().find('td:eq(4)').html());
      var fx=($(this).parent().parent().find('td:eq(5)').html());
    //  if (nombc=="" || abrv=="" || sigsoc=="" || (telf=="" && fx==""))
    if (nombc=="")
      {
        alert("Rempier toutes les informations de la banque d'abord")
      }
      else {
        $choix=confirm("voulez vous vraiment ajouter la banque");
         if ($choix)
         {
           console.log(nombc);
           $.post(basUrl+'views/component/updtbq.php',
             {
               action:'add_bq',
               nomb:nombc,
               abrvb:abrv,
               sigsocial:sigsoc,
               tel:telf,
               fax:fx,
             }, function(data) {
               alert(data);
             $('#tablebqup').DataTable().ajax.reload();//My problem is here
            });
          }
       }
      });
  });

제가 실행하는 첫 번째 시간에는 다음과 같은 것을 보여주었습니다.

“Uncaught TypeError: $(…).DataTable is not a function”

이를 해결하기 위해 적절한 링크와 스크립트를 추가했습니다.

이렇게 하면 오류가 다음으로 바뀝니다.

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined

제가 비슷한 논리 위에서 사용한 것이 놀랍다는 것은 제가 같은 논리를 사용한다는 것을 의미합니다.

 $('#tablebqup').DataTable().ajax.reload();

한 번 더 버튼을 클릭하면 데이터베이스에 대한 정보를 다음과 같이 수정할 수 있습니다.

 $(".modif").click(function () {
     $choix=confirm("voulez vous vraiment sauvegarder les modifications");
     if ($choix)
     {
       var id=($(this).parent().parent().find('td:eq(0)').html());// the value in the 1st column.
       var nombc=($(this).parent().parent().find('td:eq(1)').html());
       var abrv= ($(this).parent().parent().find('td:eq(2)').html());
       var sigsoc=($(this).parent().parent().find('td:eq(3)').html());
       var telf=($(this).parent().parent().find('td:eq(4)').html());
       var fx=($(this).parent().parent().find('td:eq(5)').html());
       console.log(id);
       $.post(basUrl+'views/component/updtbq.php',
         {
           action:'update_bq',
           idbc:id,
           nomb:nombc,
           abrvb:abrv,
           sigsocial:sigsoc,
           tel:telf,
           fax:fx,
         }, function(data) {
         $('#tablebqup').DataTable().ajax.reload();
        });
      }

이 두 링크를 추가하지 않아도 완벽하게 작동합니다!!!

오류의 dtail은 다음과 같습니다.

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
    at Ga (datatables.min.js:36)
    at M (datatables.min.js:28)
    at HTMLTableRowElement.<anonymous> (datatables.min.js:28)
    at jquery-3.2.1.min.js:2
    at Function.map (jquery-3.2.1.min.js:2)
    at r.fn.init.map (jquery-3.2.1.min.js:2)
    at ma (datatables.min.js:28)
    at e (datatables.min.js:104)
    at HTMLTableElement.<anonymous> (datatables.min.js:104)
    at Function.each (jquery-3.2.1.min.js:2)

여기 내 php 파일이 있습니다.

function add_bq()
{
  if((isset($_POST['nomb']))
  &&(isset($_POST['abrvb']))
  &&(isset($_POST['sigsocial']))
  &&(isset($_POST['tel']))
  &&(isset($_POST['fax']))
  ){
    $nomb=trim($_POST['nomb']);
    $abrv=trim($_POST['abrvb']);
    $sigc=trim($_POST['sigsocial']);
    $tel=trim($_POST['tel']);
    $fax=trim($_POST['fax']);
    //Update les banques
    MainController::addBanque($nomb,$abrv,$sigc,$tel,$fax);
   include 'C:/wamp/www/Mini_Prj/views/component/tbbanqueupd.php';
  }

포함된 내용은 다음과 같습니다. "tbbanqueupd. php"입니다.

<?php
require_once("C:/wamp/www/Mini_Prj/controllers/mainController.php");
$bnqs=MainController::getBanque();
echo'
<div>
<h3>  Mise a jours des banques</h3>
<div >

  <div class="table-responsive">
  <table id="tablebqup" class="tableau table table-fixed table-bordered table-dark table-hover ">
  <thead>
    <tr>
      <th>Id Banque</th>
      <th>Nom de la banque</th>
      <th>Abrev </th>
      <th>Siège Sociale</th>
      <th>Tel</th>
      <th>Fax</th>
      <th>Modifier</th>
      <th>Supprimer</th>
    </tr>
  </thead>
  <tbody>
  <form method="post">
  ';
  $i=0;
foreach ($bnqs as $bnq) {

echo
" <tr>
<td>".$bnq['idbc']."</td>
<td  contenteditable='true'>".$bnq['nomb']."</td>
<td  contenteditable='true'>".$bnq['abrvb']."</td>
<td  contenteditable='true'>".$bnq['sigsocial']."</td>
<td  contenteditable='true'>".$bnq['tel']."</td>
<td  contenteditable='true'>".$bnq['fax']."</td>
<td> <button id='modif$i' class='btn btn-info modif' name='button'>Modifier</button> </td>
<td> <button id='supp$i' class='btn btn-info supp' name='button' onclick='suprimer(this.id)'>Supprimer</button> </td>
</tr>";
$i++;
}
echo'
</form>
  </tbody>
</table>
</div>
<button type="button" class="btn btn-info" name="button" id="newbq" >Nouvelle banque</button>
</div>
</div>';

저는 사용자가 모든 정보를 채우지 못하게 하기 때문에 문제가 될 수도 있다고 생각했지만, 사용자가 중요한 필드에만 입력하는 방식으로 진행되기를 원합니다.어떻게 하면 이 문제를 해결할 수 있을까요?누가 도와줄 수 있습니까?

수가 때 합니다.td다 .th할 때,colspan...

당신의 CSS에 따라, 그것은 보기 어려울 수 있습니다.테이블에 테두리를 추가해서 테스트를 해볼 겁니다

단순 실수로 테이블 머리글에 제목이 없는 열 "이(가) 있었지만 테이블 자체에 열이 존재하지 않았습니다.(제목이 없고 경계가 없기 때문에) 누락된 것을 볼 수 없었습니다.

오류가 발생한 datatable.js의 줄을 보고 도움을 받았습니다 - tr에 오류가 있음을 의미하므로 전체 코드가 아닌 내 테이블을 더 자세히 살펴보았습니다.

는 의 열 하게 알고 .thead-thntbody-td부분. 콜스팬이 추가되지 않았습니다에도 되지 않았습니다.th아니면td하지만 저는 같은 이슈를 받고 있었습니다.좀 더 조사해보니 데이터 테이블에 없는 열 번호의 정렬 기능을 비활성화했습니다.

사실 6번째 열에 대한 정렬 기능을 비활성화하는 동안 데이터 테이블에 4개의 열만 있었습니다.그것은 사고였습니다.깜빡하고 못 바꿨네요.코드:

$(document).ready(function()
{
    $('#datatable').DataTable( {
        "aoColumnDefs": [
            { 'bSortable': false, 'aTargets': [0,1,6] }
        ],
        responsive: true,
    });
});

그런 다음 'aTargets' 값을 변경했는데, 이 값은 제 경우에 따라 최대 3까지 설정할 수 있었고 올바른 코드는 다음과 같습니다.

$(document).ready(function()
{
    $('#datatable').DataTable( {
        "aoColumnDefs": [
            { 'bSortable': false, 'aTargets': [0,1,3] }
        ],
        responsive: true,
    });
});

그것은 나에게 효과가 있었다.다른 사람들을 공유하고 도울 수 있어서 기쁩니다 :)

코드상, 보통 Document Ready 기능 안에 있는 DataTabe 초기화가 보이지 않습니다.그래서:

  • 각 열에 대한 명시적 구성으로 테이블을 초기화합니다("visible:true"는 테이블이 보이는 것만 확인하는 더미 설정입니다).
  • 테이블 html에 "datable" 클래스를 추가합니다.예:

예:

$(document).ready(function () {
var myTable= $('#tablebqup').DataTable({
    columns:[
    //"dummy" configuration
        { visible: true }, //col 1
        { visible: true }, //col 2
        { visible: true }, //col 3
        { visible: true }, //col 4
        { visible: true }, //col 5
        { visible: true }, //col 6 
        { visible: true }, //col 7
        { visible: true }  //col 8 
        ]
    });
});

그리고 html에:

<table id="tablebqup" class="tableau table datatable table-fixed table-bordered table-dark table-hover ">

설명:

"DataTable" 초기화 방법은 구성에 다음과 같은 수의 열이 있어야 합니다.<th>의/의<td>당신의 html에 있습니다.

잘못된 예:

 //Javascript Code
 var myTable= $('#myTableId').DataTable({
    columns: [
        //any column configuration
        { "bSearchable": false }, //col 1
        { "bSearchable": true },  //col 2
        { "bSearchable": true },  //col 3
        { "bSearchable": false }, //col 4
        { "bSearchable": false }, //col 5
        { "bSearchable": false } //col 6 
    ]
});

그리고 html 마크업:

<table id="myTable" class="table datatable">
<thead>
    <tr>
        <th>col 1 header</th>
        <th>col 2 header</th>
        <th>col 3 header</th>
        <th>col 4 header</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td> data col 1, row 1</td>
        <td> data col 2, row 1</td>
        <td> data col 3, row 1</td>
        <td> data col 4, row 1</td>
    </tr>
</tbody>
</table>

그래서 만약 그 숫자가<td>의 것과<tr>는 HTML에서 일치하며, DataTable 메서드에 더 많은 열이 구성되어 있으면 이 예외가 발생합니다.이 예에서는 DataTable 메서드에서 col 5 및 col 6의 구성 라인을 제거하면 오류가 해결됩니다.

언급URL : https://stackoverflow.com/questions/48333369/jquery-how-to-fix-cannot-set-property-dt-cellindex-of-undefined

반응형

'programing' 카테고리의 다른 글

워드프레스 API 호출 후 무효 cf7  (0) 2023.10.09
스크롤IntoView는 모든 브라우저에서 작동합니까?  (0) 2023.10.04
AngularJS VS ExtJS  (0) 2023.10.04
pandas apply function that returns multiple values to rows in pandas dataframe  (0) 2023.10.04
JS를 이용하여 h1 태그의 값을 얻는 방법은?  (0) 2023.10.04

'programing'의 다른글

  • 현재글j수정 방법 정의되지 않은 '_DT_CellIndex' 속성을 설정할 수 없습니까?

관련글

댓글

티스토리툴바