jquery와 함께 표시 할 테이블의 첫 번째 5 행을 강제로

Question

나는 어떻게 질문에 대한 질문을 썼습니다. jquery를 사용하여 일부 테이블 행을 숨기고, 처음에는 같은 질문을 사용합니다. 나타나다.

$(document).ready(function(){ 
$.ajax({ 
    type: "GET", 
    url: "test.xml", 
    dataType: "xml", 
    success: function(xml) { 
    $(xml).find('event').each(function(){  
    var Col0 = $(this).find('title').text(); 
    var Col1 = $(this).find('country').text(); 
    var Col2 = $(this).find('date').text(); 
    var Col3 = $(this).find('time').text(); 
    var Col4 = $(this).find('course').text(); 
    var Col5 = $(this).find('topic').text(); 
    var Col6 = $(this).find('pre-course').text(); 
    $('<tr></tr>').html('<th>'+Col0+'</th><td>'+Col1+'</td><td>'+Col2+'</td><td>'+Col3+'</td><td>'+Col4+'</td><td>'+Col5+'</td><td>'+Col6+'</td>').appendTo('#test'); 
initalizeTable(); 
}); 
    } 
}); 
}); 

및 HTML : 나는 다음 내 예제 코드를 사용

<table id="test"> 
     <tr><td></td><th>country</th> 
     <th>Date</th><th>time</th> 
     <th>course</th><th>topic</th> 
      <th>pre-course</th></tr> 
    </table> 

을 그리고 난 일부 디스플레이 옵션을 표시하려면 자바 스크립트를 사용 :

function initalizeTable() { 
function show (min, max) { 
    var $table = $('#test'), $rows = $table.find('tbody tr'); 
    min = min ? min - 1 : 0; 
    max = max ? max : $rows.length; 
    $rows.hide().slice(min, max).show(); 
    return false;  
} 

$('#limit').bind('change', function() { 
    show(0, this.value); 
}); 
} 

나는 포장했다을 위의 코드는 첫 번째 코드에 포함시켜 html로 가져 오는 데이터 바로 뒤에로드합니다. 여기

및

내가 수동으로 표시 옵션을 변경하는 데 사용되는 HTML입니다 :

<select id="limit"> 
    <option value="0">None</option> 
    <option value="5"selected>5</option> 
    <option value="10">10</option> 
    <option value="15">15</option> 
    <option value="20">20</option> 
    <option value="" >All</option> 
</select> 

난 단지 처음 5 개 행을 보여주는 강제 할 이제 모든 데이터가 전체 테이블에 수입되는 것을 제외하고, 좋은 작품

테이블에.

어떻게하면 좋을지 ??

감사

Answer 1

당신은 당신의 initalizeTable() 함수의 끝에서 show(0,5);를 호출 할 수 있습니다.

또는 자동으로 드롭 다운의 현재 선택된 옵션에서 최대 값을 집어 있도록 바인딩 직후 당신의 선택 변경 이벤트를 트리거 :

$('#limit').bind('change', function() { 
    show(0, this.value); 
}).trigger('change');