렌더링 데이터 테이블 부울 열

Question

서버 측 프로세싱을 사용하여 데이터를 반환하는 데이터 테이블을 가지고 있습니다. 필자는 데이터 테이블에서 주어진 기본 예제를 수정하지 않았습니다.

예를 들어 아이콘으로 렌더링하려는 부울 열이 있습니다. 1 = 녹색 눈금 0 = 적색 십자가 또는 이와 유사한 것. 현재는 this입니다. 3 열만 렌더링하면 어떻게됩니까? 여기

는

$(document).ready(function() { 
    $('#log').dataTable({ 
     "bProcessing": true, 
     "bServerSide": true, 
     "sAjaxSource": "assetlog.php" 
    "columns": [ 
      { "data": "id" }, 
      { "data": "assetcode" }, 
      { "data": "name"}, 
      { "data": "shift" } 
      { "data": "datetime" }, 
      { "data": "stop_production" }, 
      { "data": "furtheractions" } 
      { "data": "jobcomplete" }, 
      { "data": "duration" }, 
      ], 
      "columnDefs": [ 
         { 
          "render": function (data, type, row) { 
           return (data === true) ? '<span class="glyphicon glyphicon-ok"></span>' : '<span class="glyphicon glyphicon-remove"></span>'; 
          }, 
          "targets": 6 
         } 
        ] 

    }); 
}); 

감사

Answer 1

columns 및 columnDefs 중복 ... 그러나이되는 빈 전체 테이블 결과, 내가 해봤 코드입니다; 즉, columnDefs shouls에 현재 추가 한 내용은 눈금이 표시되도록하려는 columns에 들어가기 만하면됩니다.

/*Note that I'm assuming you're using DT 1.10.x, so the 'b' in front of boolean options 
*is unnecessary, if you aren't using 1.10.x then go ahead and put those back in.*/ 
$(document).ready(function() { 
    $('#log').dataTable({ 
     "processing": true, 
     "serverSide": true, 
     "ajaxSource": "assetlog.php" 
     "columns": [ 
      { "data": "id" }, 
      { "data": "assetcode" }, 
      { "data": "name"}, 
      { "data": "shift" }, 
      { "data": "datetime" }, 
      /*Note that data == true instead of ===, if you have 1 or 0 it isn't === 
      (strictly equal) to true but it is == (evaluates to equal) to true*/ 
      { "data": "stop_production", 
      "render": function (data, type, row) { 
          return (data === true) ? '<span class="glyphicon glyphicon-ok"> 
          </span>' : '<span class="glyphicon glyphicon-remove"></span>';} 
      }, 
      { "data": "furtheractions", 
      "render": function (data, type, row) { 
          return (data == true) ? '<span class="glyphicon glyphicon-ok"> 
          </span>' : '<span class="glyphicon glyphicon-remove"></span>';} 
      }, 
      { "data": "jobcomplete", 
      "render": function (data, type, row) { 
          return (data == true) ? '<span class="glyphicon glyphicon-ok"> 
          </span>' : '<span class="glyphicon glyphicon-remove"></span>';} 
      }, 
      { "data": "duration" } 
     ] 
    }); 
}); 

코드에 3 가지 변경 사항 (이 문제점과 관련된 2 개는 구문을 업데이트하는 것)을 작성했습니다. 중요한이 변경 사항은 다음과 같습니다 1이 아니기 때문에

그냥 data == true에 중복 columnDefs
• 변경 data === true에서 그것을하는 대신,이 동작을 할 각 컬럼에 render 기능을 이동
• === 진정한 있지만 사실 ==한다 (=== 계정으로 유형을 복용 엄격한 비교입니다)

와 관련성이 적은 변화가 있었다 하나

• bProcessing 및 bServerSide은 processing 및 serverSide이어야합니다. 전자는 헝가리 표기법을 사용하는 DataTables 옵션의 기존 형식이었고 columns에 대한 헝가리 표기법을 사용하지 않으므로 더 이상 사용되지 않는 표기법이 필요하지 않은 v1.10.x를 사용해야합니다.

참고 : 당신은 또한 당신이 columns 옵션을 추가하면 당신이 빈 페이지를 얻을 수 있음을 언급,하지만 당신은 그것을 설명 할 수 data: shift 후 쉼표 누락 한 것으로 나타났습니다.

Answer 2

조금 늦을 지 모르지만 실제로 같은 문제가있었습니다. 여기에 값 "1"을 대체하는 짧은 코드가 "0"녹색 부트 스트랩 틱 또는 빨간색 부트 스트랩 크로스 기준 :

function remplacerBool(tableauID, boolClass) { 
    $(tableauID + ' tr').each(function (i, row) { 
    $('td', this).each(function (j, cell) { 
     if ($(tableauID + ' th').eq(j).hasClass(boolClass)) { 
     if (cell.innerHTML == '1') {cell.innerHTML = '<div class="text-center text-success"><span class="glyphicon glyphicon-ok-circle"></span></div>';} 
     if (cell.innerHTML == '0') {cell.innerHTML = '<div class="text-center text-danger"><span class="glyphicon glyphicon-remove-circle"></span></div>';} 
     } 
    }); 
    }); 
}; 

당신이해야 할 모든은 다음과 같습니다에

• 정확한 thtablehead 부울 값을 포함하는 열은 특정 클래스를 가져야합니다. 이
  • 이 테이블 ID는
  • 함수가 인식해야하는 클래스의 이름이 부울