2017-11-30 7 views
0

일부 게으른로드 된 데이터가 포함 된 여러 행이 있습니다. 예를 들어,jQuery dataTable sort with ajax로드 된 데이터

<table border="1"> 
 
     <tr> 
 
      <th>Employee</th><th>Sales</th> 
 
     </tr> 
 
     <tr> 
 
      <td>Michale</td><td>1000</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Kim</td><td id="kimSales"></td> 
 
     </tr> 
 
     <tr> 
 
      <td>John</td><td id="johnSales"></td> 
 
     </tr> 
 
    </table>

문제는, 내가 있기 때문에 몇 가지 이유로드 페이지 후 일부 데이터를 검색해야 입니다. kimSales1500이고 johnSales가 2500이라고 가정 해 봅시다.

<script> 
    $(document).on('ready', function(e){ 
     $('#kimSales').text(1500); 
     $('#johnSales').text(2500); 
    })  
</script> 

이 경우 게으른로드 데이터로 올바르게 정렬하려고합니다. 알다시피, jQuery dataTable은 열의 클릭 헤더 (예 : https://datatables.net)를 통해 이러한 데이터를 올바르게 정렬 할 수없는 기능을 정렬합니다. 정렬 된 데이터가 오름차순이 아니거나 dsc --- dataTable이로드 된 데이터를 인식하지 못했습니다. 내가 뭘하려

:

<script> 
    $(document).on('ready', function(e){ 
     $('#kimSales').text(1500); 
     $('#johnSales').text(2500); 
    }) 

    table.dataTable(); // not properly working 
</script> 
+0

는 제대로 문제를 설명 할 수 있습니다. 문제는 정확히 무엇입니까? 테이블에 값이 표시되지 않습니까? – laiju

+0

@laiju 값이 제대로 표시되고 있지만 오름차순 또는 내림차순으로 데이터를 정렬 할 수 없으며 제대로 작동하지 않습니다. – Juntae

답변

1

에 이것을 시도, 그것은 제대로 작동합니다.

또한 ready 이벤트 핸들러에서 테이블을 초기화해야합니다. 예를 들어 :

$(document).on('ready', function(e){ 
    $('#kimSales').text(1500); 
    $('#johnSales').text(2500); 

    var table = $('#example').DataTable(); 
}); 

당신이 세포의 데이터 테이블을 초기화 AFTER 업데이트하는 경우

, 당신은 cell().invalidate() API 방법을 사용하여 테이블을 다시 그려야 할 필요가있다. 예를 들어

:

$(document).on('ready', function(e){ 
    var table = $('#example').DataTable(); 

    $('#kimSales').text(1500); 
    table.cell($('#kimSales').closest('td')).invalidate(); 

    $('#johnSales').text(2500); 
    table.cell($('#johnSales').closest('td')).invalidate(); 

    table.draw(); 
}); 
0

나는 두 번째 열을 기준으로 정렬을 달성하고자 노력하겠습니다. 당신이 세포의 데이터 테이블을 초기화 전에 업데이트 할 경우 테이블 초기화 코드와 원하는 정렬 기술 [오름차순, 내림차순]

$('table').DataTable({ 
     "order": [[ 1, "desc" ]] 
    });