동일한 페이지에서 여러 Ajax 소스를 가진 여러 DataTable

dataTables을 사용하는 단일 페이지에 여러 테이블이 있습니다. 각각은 자신의 'AjaxSource '를 가질 필요가 있습니다. 나는 이것을 정확하게하는 방법을 알아낼 수 없다. 여기에 내가 가지고있는 최소한의 코드가 있습니다 :동일한 페이지에서 여러 Ajax 소스를 가진 여러 DataTable

  var oTable = $('.datatable').dataTable({ 
             "bProcessing": true, 
             "sAjaxSource": "/ajax/function", 
       "bSort": false, 
       "fnDrawCallback": function() { 
         //some click events initilized here 
       } 
         });

이것은 기본적으로 베어 본 설정입니다. 각 테이블은 데이터 테이블 클래스 및 고유 ID입니다. 그러나 특정 테이블을 기반으로 AjaxSource를 변경하는 방법을 모릅니다.

감사합니다.

편집 :

여기 내가하고 결국 무엇을 : 테이블 내부

 $('.datatable').each(function(index){ 

       $('#'+$(this).attr('id')).dataTable({ 
             "bProcessing": true, 
       "sAjaxSource": $(this).children('caption').html(), 
       "bSort": false, 
       "fnDrawCallback": function() { 
       } 
         }); 
     });

나는 CSS에 의해 숨겨진와 아약스 소스 URL이 포함 된 자막 태그를 넣어. 그것은 각 인스턴스를 반복하고 URL을 움켜 잡습니다.

이것은 지금까지 작동하는 것 같습니다.

출처

2011-10-19 dzm

작동하지 않습니까? 이 클래스는 클래스가 아닌 ID를 사용하여 각 데이터 테이블을 고유하게 식별하고 ID를 기반으로 각 테이블에 별도의 소스를 연결합니다.

var oTable = $('#FirstDataTableID').dataTable({ 
      "bProcessing": true, 
      "sAjaxSource": "/ajax/function", 
      "bSort": false, 
      "fnDrawCallback": function() { 
        //some click events initilized here 
      } 
     }); 

    var oTable = $('#SecondDataTableID').dataTable({ 
      "bProcessing": true, 
      "sAjaxSource": "/ajax/other_function", 
      "bSort": false, 
      "fnDrawCallback": function() { 
        //some click events initilized here 
      } 
     });

출처

2011-10-19 21:00:52

그래, 아마도,하지만 각각에 대해 완전히 새로운 초기화를 사용하고 싶지는 않을 것입니다. 상당히 지저분해질 것입니다. – dzm

글쎄, 각 데이터 테이블에 별도의 초기화를하지 않고도 각 데이터 테이블에 별도의 초기화를하는 것이 꽤 까다 롭습니다. 클래스를 기반으로 하나의 공통 초기화를 시도한 다음 소스 속성 만 지정하여 더 작은 초기화를 분리하여 공통 코드를 반복하지 않도록 할 수 있습니다. –

방금 작업 한 것으로 보이는 솔루션으로 게시물을 업데이트했습니다. 어떻게 생각하십니까? 어떤 문제를 참조하십시오? – dzm

당신은 당신이 필요로하는 것을 얻을 수 있도록 sperately 각 테이블을 선택하고 순서대로 적절한 아약스 데이터 소스를 적용해야합니다. 지금 당신은 클래스 이름에 따라 선택됩니다

이

$(".dataTable")

아마로 변환해야합니다 : 난 당신이 테이블의 많은 경우이 지루한 얻을 것이다 생각

$("#dataTable1")

하지만 꽤입니다 당신이 제안한 것을 당신이 할 수있는 유일한 방법.

$('.dataTableServer').each(function() { 
     var source = $(this).attr("data-source"); 
     $(this).dataTable({ 
      "sPaginationType": "full_numbers", 
      "bProcessing": true, 
      "bServerSide": true, 
      "sAjaxSource": source 
     }); 
    });

각 데이터 테이블

출처

2011-10-19 21:01:20 Gjohn

은 내가 당신과 비슷한 데이터 - 속성 및 초기화 코드 HTML5를 사용하여 해결 같은 문제가 있었다

동일한 페이지에서 2 개 이상 사용할 수 있습니다. 나는 그것을했으며 datatables는 꽤 잘 작동한다. Datatables는 레코드가 비동기식으로 제거 된 경우에도 로컬로 데이터를 저장합니다. 따라서 우리는 제거 된 레코드를 검색 할 때 올바른 결과를 보여주기 위해 항상 명확하게해야합니다. datatables를 한 번만 초기화해야하기 때문에 동일한 페이지의 각 데이터 테이블에 대해 로컬 레코드를 저장하므로 데이터를 초기화해야합니다. 동일한 페이지에서 저장하기 때문에/다른 데이터를 보여줘.

So. 이 방법을 일관되게 사용해야합니다.

$("#Id_of_Current_DTBL").DataTable().destroy(); 
$("#Id_of_Other1_DTBL").DataTable().clear(); 
$("#Id_of_Other2_DTBL").DataTable().clear();

이렇게하면 문제가 해결됩니다.

출처

2011-11-10 17:02:48

에 대한 ID를 만들 필요가 없습니다 그 방법 :

출처

2017-07-23 12:37:40

동일한 페이지에서 여러 Ajax 소스를 가진 여러 DataTable

답변

관련 문제