DataTables column()。search() - 按字符串中的开头字母搜索

时间:2014-07-01 22:28:01

标签: javascript datatables

我有一个专栏搜索Surnames。

在搜索姓氏'表格页脚中的文本框,我希望能够进行搜索,以便输入" S" ..."我" ..." m" ..& #34; p"结果仍然出现在" Simpson",但是如果我键入" son",则不会出现。

目前,如果我输入"儿子"," Simpson"结果仍然显示为文本包含在字符串中。

如何配置它以在我键入时搜索字符串的开头?

到目前为止,这是我的代码:

    $(document).ready(function () {

    $('.thSurname').each(function () {
        $(this).html('<input type="text" placeholder="Search Surname" />');
    });

    var table = $('#ContactTable').DataTable({
        "aoColumns": [
            { "bVisible": false },
            { "sClass": "center" },
            { "sClass": "center" },
            { "sClass": "center" },
            { "sClass": "center" }
        ]
    });

    table.columns().eq(0).each(function (colIdx) {
        $('input', table.column(colIdx).footer()).on('keyup change', function () {
            table
                .column(colIdx)
                .search(this.value)
                .draw();
        });
    });
    });

2 个答案:

答案 0 :(得分:1)

我认为这应该有用。

.search(new RegExp("^"+this.value,"i")).

胡萝卜符号表示仅匹配搜索字符串开头的表达式。 i修饰符表示它不区分大小写。

快速JSfiddle表明它对我有用。

答案 1 :(得分:0)

这里的解决方案对我来说似乎没有用,也许它已被弃用了。我最终使用了fnFilter功能。例如:

$('.datatable').dataTable().fnFilter("^[0-9]", 0, true);

或以数字开头的文字:

$('.datatable').dataTable().fnFilter("", 0);

然后清除过滤器

<li>
   <div class="itemTitle"><a href="http://www.moneycontrol.com/news/results-boardroom/expect-20-topline-growthfy16-sintex-industries_3626821.html" target="_blank">Expect 20% topline growth in FY16: Sintex Industries</a></div>
   <div class="itemDetail">
      <span class="itemDate">10/16/2015, 11:11 AM</span>
      <span class="Source">moneycontrol</span>
      <div class="itemContent"><img src="http://www.moneycontrol.com/news_image_files/2015/s/samir-joshipura-200.jpg" alt="Samir Joshipura" title="Samir Joshipura" border="0" width="75" height="75" hspace="5"> Samir Joshipura Group CEO, Sintex is confident of meeting the guidance of 20 percent topline growth in FY16 and margin growth between 50-100 basis points.</div>
   </div>
</li>