当我有更多时,如何使这个表只显示10行,以及当我搜索时如何显示其他行?

I used this table: jsfiddle.net/giorgitbs/52ak9/1/ and don't know how to have more rows but display only 10 and to be searchable..

<div class="input-group"> <span class="input-group-addon">Filter</span>

    <input id="filter" type="text" class="form-control" placeholder="Type here...">
</div>
<table class="table table-striped">
    <thead>
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>Default</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody class="searchable">
        <tr>
            <td>EUR</td>
            <td>EURO</td>
            <td></td>
            <td>Active</td>
        </tr>
        <tr>
            <td>GBP</td>
            <td>Pound</td>
            <td></td>
            <td>Active</td>
        </tr>
        <tr>
            <td>GEL</td>
            <td>Georgian Lari</td>
            <td><span class="glyphicon glyphicon-ok"></span>
            </td>
            <td>Active</td>
        </tr>
        <tr>
            <td>USD</td>
            <td>US Dollar</td>
            <td></td>
            <td>Active</td>
        </tr>
    </tbody>
</table>

Javascript-

$(document).ready(function () {

    (function ($) {

        $('#filter').keyup(function () {

            var rex = new RegExp($(this).val(), 'i');
            $('.searchable tr').hide();
            $('.searchable tr').filter(function () {
                return rex.test($(this).text());
            }).show();

        })

    }(jQuery));

});

Please help

You can insert your row with

.row-class:nth-child(n+10){
    display:none;
}

and when found a row/s by filter input change the visibiliti at display:block

Try this

you have to just change the limit on sql query an ajax page

for example,

$search="test";

if(isset($search))

{

select * from tblname where col_name like %$search%;

}

else

{

select * from tblname where limit 0,10;

}