Question

我有关于使用数据表进行搜索的示例：jsfiddle.net/rmLLo7z2

如果我删除输入标签并将其放在上面就是文本正常。搜索确定。

但它无法使用输入标记进行搜索。

Answer 1

您需要设置data-search和data-order属性

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>

            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>

            </tr>
        </tfoot>

        <tbody>
            <tr>
                <td data-search="Tiger Nixon" data-order="Tiger Nixon"><input value="Tiger Nixon"/></td>
                <td data-search="System Architect" data-order="System Architect"><input value="System Architect"/> </td>
                <td data-search="Edinburgh" data-order="Edinburgh"><input value="Edinburgh"/></td>                
            </tr>
            <tr>
                <td data-search="Garrett Winters" data-order="Garrett Winters"><input value="Garrett Winters"/></td>
                <td data-search="Accountant" data-order="Accountant"><input value="Accountant"/> </td>
                <td data-search="Tokyo" data-order="Tokyo"><input value="Tokyo"/></td> 
            </tr>
            <tr>
                <td data-search="Ashton Cox" data-order="Ashton Cox"><input value="Ashton Cox"/></td>
                <td data-search="Junior Technical Author" data-order="Junior Technical Author"><input value="Junior Technical Author"/> </td>
                <td data-search="San Francisco" data-order="San Francisco"><input value="San Francisco"/></td> 
            </tr>
            <tr>
                <td data-search="Cedric Kelly" data-order="Cedric Kelly"><input value="Cedric Kelly"/></td>
                <td data-search="Senior Javascript Developer" data-order="Senior Javascript Developer"><input value="Senior Javascript Developer"/> </td>
                <td data-search="Edinburgh" data-order="Edinburgh"><input value="Edinburgh"/></td>                
            </tr>
    </tbody>
</table>

http://jsfiddle.net/rmLLo7z2/3/

有关data-attributes的更多信息：https://datatables.net/examples/advanced_init/html5-data-attributes.html

Answer 2

如果数据是通过Ajax或其他来源加载的，则可以使用如下所示的渲染功能。

            columns: [
                { 
                  data:'displayname',
                  width:'30%',
                  render: function(data,type,row)
                  {
                    if(type === 'filter'){
                      return data;
                    }
                    return '<input type="text" style="width:100%" value="'+data+'" name="Child_Displayname">';
                  },
                },
            ..]

搜索不使用数据表1.10上的输入标记

2 个答案: