jquery-datatables-rails 2.2.3에서 2.2.1로 업그레이드 RailsCasts 340 Datatables에서 코드가 깨집니다.

Question

이 질문에 대한 답변을 드릴 것입니다. 기록을 남기고 여기 나를 따라 오는 사람을 돕는 것입니다.

나는 RailsCast340을 사용하여 DataTable을 빌드합니다. 훌륭하게 작동했지만 테이블 너비와 비교하여 열 너비와 관련하여 어려움을 겪었습니다. Datatable rows extend past table boundary, or are too narrow을 참조하십시오. 일반적으로 jquery-datatables-rails를 2.2.1에서 2.2.3으로 업그레이드하여 DataTables 1.9에서 1.10으로 전환하는 것이 좋습니다. 여기에는 데이터 테이블 반응성 0.2.0도 포함됩니다.

Converting parameter names for DataTables 1.10을 참조하면 변경되지 않은 변수 이름 변경이 있음을 알 수 있습니다. 1.9와 역 호환이 가능합니다. 네이티브 DataTable을 사용하고 있다면, 그럴 수도 있습니다. 그러나 jquery-datatables-rails의 경우는 특별히 RailsCasts 340을 참조하면됩니다.

이 질문과 대답은 따라 오는 모든 사람들을 위해 쉽게 변환 할 수 있으며 초기에이 코드를 쉽게 구현할 수 있습니다.

Answer 1

이러한 문제를 해결하는 데 도움이되는 몇 가지 코드를 게시 할 예정입니다. 첫째, my discussion with Allan, author of DataTables은 모든 세부 사항이 포함되어 있지는 않지만 도움이 될 것입니다.

DataTables 1.9에서 1.10로 업그레이드 할 때 일부는 conversion issues입니다. 다시 말하지만 jquery-datatables-rails와 RailsCast 340을 사용하고있는 것을 제외하고는 깨지지 않아야합니다.

다음 내용을 이해하려면 RailsCasts/AsciiCasts 340을 참조하십시오. 내 응용 프로그램에서 코드를 가져 오는 중이므로 일대일 일치가 아니므로 해당 자습서를 이해해야합니다.

변수 이름과 관련하여 as_json 호출이 다음과 같이 변경됩니다.

DataTables 1.9 코드 :

def as_json(options = {}) 
    { 
     sEcho: params[:sEcho].to_i, 
     iTotalRecords: Car.count, 
     iTotalDisplayRecords: cars.total_entries, 
     aaData: data 
    } 
    end 

1.10 코드 :

def as_json(options = {}) 
    { 
     draw: params[:draw].to_i, 
     recordsTotal: Car.count, 
     recordsFiltered: cars.total_entries, 
     data: data 
    } 

다른 변경 사항은 "PARAMS"목록에있는, 그래서 그들은 더 명확해야한다.

params[:search][:value] replaces params[:sSearch] 
params[:start] replaces params[:iDisplayStart] 
params[:length] replaces params[:iDisplayLength] 
params[:order]['0'][:column] replaces params[:iSortCol_0] 
params[:order]['0'][:dir] replaces params[:sSortDir_0] 

특히 여러 테이블의 경우 JQuery 초기화 논리가 복잡 할 수 있습니다. 언급 한 보석에 대한 본보기로 이것을 제출할 것입니다. 그것은 더 많은 것은 있지만 두 테이블에 대한 초기화를 보여줍니다. 두 번째 테이블은 Ajax를 사용하여 서버가 각 페이지마다 동적으로 데이터를 제공 할 수 있도록합니다. 데이터 테이블 반응 형 보석을 사용하여 테이블도 응답합니다. 그래서 이것은 새로운 변수 이름을 가진 샘플 일뿐입니다.

$(document).ready(function() { 
    var breakpointDefinition, tableElement; 
    var rHelperData, rHelperCar; 
    rHelperData = void 0; 
    rHelperCar = void 0; 
    breakpointDefinition = { 
     tablet: 1300, 
     phone: 480 
    }; 
    tableElement = $("#datatable"); 
    tableElement.dataTable({ 
     responsive: true, 
     autoWidth: false, 
     pagingType: "full", 
     jQueryUI: true, 
     preDrawCallback: function() { 
      if (!rHelperData) { 
       rHelperData = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition); 
      } 
     }, 
     rowCallback: function (nRow) { 
      rHelperData.createExpandIcon(nRow); 
     }, 
     drawCallback: function (oSettings) { 
      rHelperData.respond(); 
     } 
    }); 
    tableElement = $("#carstable"); 
    tableElement.dataTable({ 
     responsive: true, 
     autoWidth: false, 
     pagingType: "full", 
     jQueryUI: true, 
     processing: true, 
     serverSide: true, 
     ajax: $('#carstable').data('source'), 
     preDrawCallback: function() { 
      if (!rHelperCar) { 
       rHelperCar = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition); 
      } 
     }, 
     rowCallback: function (nRow) { 
      rHelperCar.createExpandIcon(nRow); 
     }, 
     drawCallback: function (oSettings) { 
      rHelperCar.respond(); 
     } 
    }); 
}); 

변경 사항은 내가 사용하고있는 변경 사항입니다. 더 많은 것이있을 수 있지만, 이것이 어디로 가고 있는지 알 수 있습니다. core jquery-datatables-rails code을 참조 할 수 있습니다.

RailsCast 340에 하나의 잡아 당김이 있습니다. DataTables을 사용하기 위해 작업중인 부분을 변환하고있었습니다. 이를 위해 동적으로 정의되고 표시되는 모든 요소를 ​​제거해야했습니다.

또한 jquery-datatables-rails 2.2.3은 bug with the expand icon입니다. 며칠 내에 고쳐야합니다. 펼치기 아이콘은 이상한 오리입니다. 반응 형 테이블이 너무 좁아서 모든 셀을 연속으로 표시 할 수없는 경우 일부 셀을 숨길 수 있습니다. 그런 일이 발생하면 각 행의 시작 부분에 더하기 기호가 나타납니다.더하기 기호는 확장 아이콘입니다. 클릭하면 해당 행의 모든 ​​셀이 표시됩니다. 현재 확장 아이콘 또는 더하기 기호가 표시되지 않습니다. 저자가 말한 알려진 버그입니다.

희망이 도움이됩니다.