숨겨진 jQuery DataTables 열을 양식에 게시하는 방법

Question

일부 보이는 열 (이름, 성)과 숨겨진 열 (id)이있는 DataTable이 있습니다. DataTable 행 선택 예제를 사용하여 사용자가 선택하는 행을 강조 표시합니다. 버튼을 누르면 선택된 행의 숨겨진 열에 값을 표시 할 수 있습니다. 알아 내고자하는 것은 숨겨진 값을 양식의 입력 변수로 다른 페이지에 게시하는 방법입니다.

내 버튼이 호출하는 기능은 다음과 같습니다. 단순히 숨겨진 ID 열을 표시하기 만하면됩니다.

$('#select').click(function() { 

    var anSelected = fnGetSelected(oTable); 

    if (anSelected.length == 0) { 
     alert('Please make a selection'); 
    } else { 

     // Get data from the selected row      
     var aRow = anSelected[0]; 
     var sFirstName = oTable.fnGetData(aRow, 0); 
     var sLastName = oTable.fnGetData(aRow, 1); 
     var sID = oTable.fnGetData(aRow, 2); 

     alert('You have selected ' + sID); 
    } 
}); 

이 값을 양식의 입력 변수로 게시하는 방법이 명확하지 않습니다.

또한이 문제를 해결하려고 시도했지만 실제로 값을 게시하는 방법을 보여주지 못하는 예제를 발견했습니다.

$(document).ready(function() { 

    var oTable; 

    $('#form').submit(function() { 
     var sData = $('input', oTable.fnGetNodes()).serialize(); 
     alert("The following would have been submitted to the form: \n\n"+sData); 
     return true; 
    }); 

    oTable = $('#example').dataTable(); 

}); 

짐작하지 못했을 경우에 대비해 jQuery와 DataTables를 처음 사용했습니다. :) 내가 그들을 유용하게 사용할 수있는 다른 사람을 위해 게시하도록하겠습니다이 문제에 대한 두 가지 솔루션을 함께했다

Answer 1

사전에 어떤 도움

감사합니다 .... 기본적인 아이디어는 다음

(a) 사용자가 (b)는 해당 행 (c)에 대한 숨겨진 열의 값을 판독 숨겨진 폼 필드

받는 값을 할당 선택한 어떤 행 알고 두 솔루션의 차이는 값이 할당 될 때입니다. 첫 번째 솔루션에서는 사용자가 제출 버튼을 누를 때 값이 지정됩니다. 두 번째 솔루션에서는 사용자가 행을 클릭 할 때마다 값이 지정됩니다.

솔루션 # 1 : 이것은 이전에 게시 된 코드를 기반으로합니다. 여기서는 alert 대화 상자를 getElementById 함수를 사용하여 숨겨진 양식 필드에 숨겨진 값을 할당하는 문으로 대체했습니다.

$('#select').click(function() { 

    var anSelected = oTable.$('tr.row_selected'); 

    if (anSelected.length == 0) { 
     alert('Please make a selection'); 
    } else { 
     // Get data from the selected row      
     var aRow = anSelected[0]; 
     var sFirstName = oTable.fnGetData(aRow, 0); // Don't need this anymore 
     var sLastName = oTable.fnGetData(aRow, 1); // Don't need this anymore 
     var sID = oTable.fnGetData(aRow, 2); // Hidden column 

     document.getElementById('hiddenUserID').value = sID; 
    } 
}); 

제 양식에는 위의 기능을 호출하는 숨겨진 입력 필드와 제출 버튼이 있습니다.

<input type="hidden" name="user_id" id="hiddenUserID" value="" /> 
<button id="select" type="submit">Select User</button> 

해결 방법 # 2 :이 솔루션에서는 사용자가 행을 선택할 때마다 값을 할당합니다. 코드는 여기에서 찾을 수 DataTables 행 선택 예 차용 : 전술 한 바와 같이

http://datatables.net/release-datatables/examples/api/select_single_row.html

/* Add a click handler to the rows */ 
$("#example tbody tr").click(function(e) { 

    if ($(this).hasClass('row_selected')) { 
     $(this).removeClass('row_selected'); 
    } else { 
     oTable.$('tr.row_selected').removeClass('row_selected'); 
     $(this).addClass('row_selected'); 

     // Get the data from the selected row 
     var sID = oTable.fnGetData(this, 2); 
     document.getElementById('hiddenUserID').value = sID; 
    } 
}); 

내 형태가 같은 숨겨진 입력 필드를 갖는다. 내 제출 단추는 첫 번째 솔루션에서 함수를 호출하지만 행이 선택되었는지 확인하기 위해 사용됩니다.

두 가지 솔루션 모두 훌륭하게 작동합니다. 나는 당신이 사용하는 것이 개인의 취향과 필요에 달려 있다고 생각합니다.

1) 사용자 정의를 fnCreatedRow 콜백을 통과하는 데이터 테이블을 만듭니다

Answer 2

여기 솔루션에서 필자는, 기본적 같은 필요성을 가지고있다. 콜백은 생성 된 각 행에 클릭 리스너를 추가하는 데 사용됩니다.

var options = { 
    fnCreatedRow: createdRow, 
    ... 
}; 

var dataTable = element.dataTable(options); 

2) 수신기를 만드는 동안, 클릭 리스너에서 실제 리스너

function createdRow(nRow, aData, iDataIndex) { 
    $(nRow).on('click', {dataIndex: iDataIndex}, rowClickListener); 
} 

3)에 행 인덱스를 전달의 실제 데이터를 얻을 수있는 인덱스를 사용해야합니다 (즉, HTML이 아닌 JS 객체), dataTable 객체에서`fnGetData 'API를 호출합니다.

function rowClickListener (evt) { 
    var rowData = dataTable.fnGetData(evt.data.dataIndex); 

    console.log(rowData.lastName + ' ' rowData.firstName); 
} 

크레딧은 사용자 spasco에게도 적용됩니다.