>

jquery에서 datatables 플러그인을 사용하고 있으며 내 datatable에 버튼을 추가했습니다. 버튼을 누를 때 정렬되지 않은 목록 요소에 요소 제목을 추가하고 싶습니다.

최소한의 실행 가능한 예에서 찾기 :

const results = {
  "generalInfo": [{
      "title": "title1",
      "permalink": "www.link.com",
      "manufacturer": "manufacturer1",
      "img": "https://images-na.ssl-images-test.com/images/asdfIdR/5adf1vELadfZeiMML.jpg",
      "curreny": "$",
      "price": "64.00",
      "availability": "Usually ships in 24 hours",
    },
    {
      "title": "title2",
      "permalink": "www.link.com",
      "manufacturer": "manufacturer2",
      "img": "https://images-na.ssl-images-test.com/images/I/51adfkLhadsfgACH0L.jpg",
      "curreny": "$",
      "price": "59.99",
      "availability": "Usually ships in 24 hours",
    }
  ]
}
//transform data set
let dataSet = results.generalInfo.map((item, i) => [
  i + 1,
  `<img src="${item.img}" alt="${item.title}" height="42" width="42">
                 <a href="<?php the_permalink();?>">
                     ${item.title}
                 </a>`,
  item.manufacturer,
  `<div>${item.currency} ${item.price}</div>`,
  item.availability,
  `<button id="addButton" type="button" onClick="${this.addToResults.bind(item)}">
                    Add
                </button>`,
  `<a class="btn btn-primary" target="_blank" role="button">
                    Buy
                </a>`
])
$('#table_id').DataTable({
  data: dataSet,
  destroy: true,
  columns: [{
      title: "#"
    },
    {
      title: "Title"
    },
    {
      title: "Manufacturer"
    },
    {
      title: "Price"
    },
    {
      title: "Availability"
    },
    {
      title: ""
    },
    {
      title: ""
    }
  ]
})
function addToResults(item) {
  $("ul").append(`<li>${item.title}</li>`);
}

<link href="http://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="table_id" class="display" style="width:100%"></table>
<h1>Results:</h1>
<ul>
</ul>

버튼을 누르면 오류 메시지가 표시되고 텍스트가 추가되지 않습니다.

내가 뭘 잘못하고 있는가?


  • 답변 # 1

    인라인 JS 핸들러에 항목을 바인딩하는 대신 (인라인 JS는 평범하지 않기 때문에 사람들이 실제로하지 않도록 권장합니다) 실제로 원하는 것은 단순히 results.generalInfo 에 대한 참조입니다.  올바른 항목을 꺼낼 수 있도록 배열합니다.

    이 경우 충분합니다 :

    <올>

    버튼에 ID가 아닌 클래스를 지정하십시오 (ID는 고유해야 함). <button class="addButton" ... /> .

    해당 항목에 대한 변경되지 않은 참조를 저장하십시오. 이것은 data- 에 인덱스를 저장하는 것만 큼 간단합니다.  속성 (예 : 와이즈 비즈

    클릭 이벤트 핸들러를 해당 클래스에 바인딩

    click 이벤트 핸들러에서 <button data-item-index="${i}" class="addButton" ... /> 에서 값을 검색하십시오.   data-item-index 에서 찾은 원래 항목에 액세스하기위한 키로 사용하십시오. . 그 results.generalInfo 를 기억  속성은 항상 string을 리턴하므로 data- 를 사용하십시오.  강제로 정수로 캐스팅하십시오 :

    +
    
    

    아래의 개념 증명 스 니펫을 참조하십시오 :

    $('#table_id').on('click', 'button.addButton', function() {
      const itemIndex = +$(this).data('item-index');
      const item = results.generalInfo[itemIndex];
      $("ul").append(`<li>${item.title}</li>`);
    });
    
    
    const results = {
      "generalInfo": [{
          "title": "title1",
          "permalink": "www.link.com",
          "manufacturer": "manufacturer1",
          "img": "https://images-na.ssl-images-test.com/images/asdfIdR/5adf1vELadfZeiMML.jpg",
          "curreny": "$",
          "price": "64.00",
          "availability": "Usually ships in 24 hours",
        },
        {
          "title": "title2",
          "permalink": "www.link.com",
          "manufacturer": "manufacturer2",
          "img": "https://images-na.ssl-images-test.com/images/I/51adfkLhadsfgACH0L.jpg",
          "curreny": "$",
          "price": "59.99",
          "availability": "Usually ships in 24 hours",
        }
      ]
    }
    //transform data set
    let dataSet = results.generalInfo.map((item, i) => [
      i + 1,
      `<img src="${item.img}" alt="${item.title}" height="42" width="42">
                     <a href="#">
                         ${item.title}
                     </a>`,
      item.manufacturer,
      `<div>${item.currency} ${item.price}</div>`,
      item.availability,
      `<button class="addButton" type="button" data-item-index="${i}">
                        Add
                    </button>`,
      `<a class="btn btn-primary" target="_blank" role="button">
                        Buy
                    </a>`
    ]);
    $('#table_id').on('click', 'button.addButton', function() {
      const item = results.generalInfo[+$(this).data('item-index')];
      $("ul").append(`<li>${item.title}</li>`);
    });
    $('#table_id').DataTable({
      data: dataSet,
      destroy: true,
      columns: [{
          title: "#"
        },
        {
          title: "Title"
        },
        {
          title: "Manufacturer"
        },
        {
          title: "Price"
        },
        {
          title: "Availability"
        },
        {
          title: ""
        },
        {
          title: ""
        }
      ]
    });
    
    

    <link href="http://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" /> <table id="table_id" class="display" style="width:100%"></table> <h1>Results:</h1> <ul> </ul>

관련 자료

  • 이전 Python에서 MySQL 삽입 명령문이 작동하지 않습니다
  • 다음 SQL Server query - sql server 쿼리 - 2 개의 데이터베이스