선택 메뉴 (DataTables)를 사용한 열 필터링

Question

안녕하세요!

MVC3 및 jquery DataTables 플러그인을 사용하고 있습니다. 요점은 선택 메뉴로 열 필터링을 만드는 것입니다 (추가 다중 선택).

(function ($) { 
    $.fn.dataTableExt.oApi.fnGetColumnData = function (oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty) { 
     // check that we have a column id 
     if (typeof iColumn == "undefined") return new Array(); 

     // by default we only want unique data 
     if (typeof bUnique == "undefined") bUnique = true; 

     // by default we do want to only look at filtered data 
     if (typeof bFiltered == "undefined") bFiltered = true; 

     // by default we do not want to include empty values 
     if (typeof bIgnoreEmpty == "undefined") bIgnoreEmpty = true; 

     // list of rows which we're going to loop through 
     var aiRows; 

     // use only filtered rows 
     if (bFiltered == true) aiRows = oSettings.aiDisplay; 
     // use all rows 
     else aiRows = oSettings.aiDisplayMaster; // all row numbers 

     // set up data array 
     var asResultData = new Array(); 

     for (var i = 0, c = aiRows.length; i < c; i++) { 
      iRow = aiRows[i]; 
      var aData = this.fnGetData(iRow); 
      var sValue = aData[iColumn]; 

      // ignore empty values? 
      if (bIgnoreEmpty == true && sValue.length == 0) continue; 

      // ignore unique values? 
      else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue; 

      // else push the value onto the result data array 
      else asResultData.push(sValue); 
     } 

     return asResultData; 
    } 
} (jQuery)); 

function fnCreateSelect(aData) { 
    var r = '<select><option value=""></option>', i, iLen = aData.length; 
    for (i = 0; i < iLen; i++) { 
     r += '<option value="' + aData[i] + '">' + aData[i] + '</option>'; 
    } 
    return r + '</select>'; 
} 
$(document).ready(function() { 
    var oTable = $('#dataTable').dataTable({ 
     "sDom": 'W<"clear">lfrtip', 
     "sAjaxSource": '@Url.Action("ResourcesWorkflowData", "LineManager")', 
     "aoColumns": [ 
    { "sTitle": "User", "mData": "User" }, 
    { "sTitle": "Region", "mData": "Region" }, 
    ] 
}); 
    /* Add a select menu for each TH element in the table footer */ 
    $("tfoot th").each(function (i) { 
     this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i)); 
     $('select', this).change(function() { 
      oTable.fnFilter($(this).val(), i); 
     }); 
    }); 
}); 

문제는 내 aaData에 : 여기

이 DataTables example 꽤 유사하다 내 JS이다.

 "aaData": [ 
    { 
     "User": "User1", 
     "Region": "Central", 
    }, 
    { 
     "User": "User2", 
     "Region": "Central", 
    } 
] 

나는 "정의되지 않은 재산 '길이'를 읽을 수 없습니다"얻을 :이 같은 배열의 배열을 전달하는 경우 :

"aaData": [ 
    ['User1', 'Central'], 
    ['User2', 'Central'], 
] 

모든 것이 잘 간다,하지만 난이 같은 객체의 배열을 만들 경우 이 줄의 오류 :

 // ignore empty values? 
      if (bIgnoreEmpty == true && sValue.length == 0) continue; 

왜 이런 일이 발생합니까? ColumnFilter 또는 ColumnFilterWidgets 같은 일부 추가 기능을 사용하려고했지만 두 경우 모두 몇 가지 문제가 있습니다. 어떤 제안을 해주시겠습니까?

Answer 1

sValue가 null 인 것으로 보입니다. 즉, Json의 필드 중 하나가 null이라는 의미입니다. 당신은 당신의 전체 Json을 붙일 수 있습니까?

이런 종류의 문제는 작은 해킹이 있습니다. 값이 더 이상 null이되지 않습니다으로

User = SomeObject.User != null ? SomeObject.User : " "; 

이 문제를 해결해야합니다

그냥 확인되지 않은 필드는이 같은 간단한 뭔가를 쓸 수 있습니다 null이 확인합니다.