CODEWITHSUNDEEP
javascriptjqueryhtmlxmlshow-hide
Digital site
Digital site

Reputation: 4447

force the first 5 rows in a table to show with jquery

I wrote a question show hide jquery table rows for imported xml data about how to show hide some table rows using jquery, and now using the same question, I want to know how to force the first 5 elements to show up. I used the following code in my example:

$(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();  
 });
  }
 });
});

and 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>

And then I used the javascript to display only some display options:

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);
});
}

I had to wrap the above code to include it in the first code so that it loads directly after the data being imported to html.

and here is the html I used to change the display option manually:

<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>

now everything works great, except that the data are imported in full table where I want to force showing only the first 5 rows in the table.

any idea how to do that??

Thanks

Upvotes: 1

Views: 2321

Answers (1)

nnnnnn
nnnnnn

Reputation: 150070

You could call show(0,5); at the end of your initalizeTable() function.

Or trigger your select's change event just after you bind it so that it automatically picks up the maximum value from the drop-down's currently selected option:

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

Upvotes: 1

Related Questions