Question

我使用了这个表：jsfiddle.net/giorgitbs/52ak9/1/并且不知道如何拥有更多行但只显示10个并且可以搜索...

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

});

请帮忙

Answer 1

您可以使用

插入行

var arr =[
 {
  price:20,
  rule:"a"
 },
 {
  price:10,
  rule:"b"
 },
 {
  price:5,
  rule:"a"
 },
 {
  price:50,
  rule:"b"
 },
 {
  price:70,
  rule:"b"
 }
],
reduced = arr.reduce((p,c) => { var fo = p.find(f => f.rule == c.rule);
                                fo ? (fo.countOfRule++,
                                      fo.minPriceForThisRule > c.price && (fo.minPriceForThisRule = c.price))
                                   :  p.push({rule:c.rule, countOfRule:1, minPriceForThisRule: c.price});
                                return p;
                              },[]);
console.log(reduced);

当通过过滤器输入找到一行时，会更改.row-class:nth-child(n+10){ display:none; }

处的可见性

Answer 2

试试这个

你必须改变sql查询和ajax页面的限制

例如，

$搜索= “测试”;

if（isset（$ search））

{

从tblname中选择*，其中col_name如％$ search％;

}

否则

{

从tblname中选择*，其中限制为0,10;

}

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

2 个答案: