Question

这个NEW FIDDLE在表格中显示一个文本，我可以在其中过滤数据，但我不希望输入在表格中，我想要映射到另一个输入或从表格中删除它把它放在外面。

不在我的档案上工作：

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="js/tableutils.js"></script>


    <script>
        function searchRecords() {

            $('#searchMe').tableutils({
                filter: {
                    type: ['text']
                },
                fixHeader: {
                    width: 1000,
                    height: 200
                },

                columns: [{
                    label: 'First Name'
                }, {
                    label: 'Last Name'
                }, {
                    label: 'Concept'
                }, {
                    label: 'Rating'
                }, {
                    label: 'AKA'
                }]
            });

            $('#searchRecords').hide();
        }

        searchRecords();

$('#filter_searchMe_0').css('width','100px').detach().appendTo( "#outSide" );
</script>

<body onload="searchRecords();">
<div id="outSide"></div>
<div class="demoContentDIV">
    <ul id="allDemos" style="list-style-type: none;">
        <li id="searchContent">
            <table id="searchMe" width="980px">
                <thead>
                    <tr>
                        <th width="20%">First Name</th>
                        <th width="20%">Last Name</th>
                        <th width="10%">Concept</th>
                        <th width="10%">Rating</th>
                        <th width="40%">AKA</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td width="20%">Tony</td>
                        <td width="20%">Stark</td>
                        <td width="10%">Marvel</td>
                        <td width="10%">42</td>
                        <td width="40%">Iron Man</td>
                    </tr>
                    <tr>
                        <td width="20%">Jack</td>
                        <td width="20%">Sparrow</td>
                        <td width="10%">Disney</td>
                        <td width="10%">40</td>
                        <td width="40%">Pirate</td>
                    </tr>
                    <tr>
                        <td width="20%">Bruce</td>
                        <td width="20%">Banner</td>
                        <td width="10%">Marvel</td>
                        <td width="10%">38</td>
                        <td width="40%">The Hulk</td>
                    </tr>
                    <tr>
                        <td width="20%">Clarke</td>
                        <td width="20%">Kent</td>
                        <td width="10%">DC</td>
                        <td width="10%">35</td>
                        <td width="40%">Man of Steel</td>
                    </tr>
                    <tr>
                        <td width="20%">Bruce</td>
                        <td width="20%">Wayne</td>
                        <td width="10%">DC</td>
                        <td width="10%">34</td>
                        <td width="40%">The Dark Knight</td>
                    </tr>
                    <tr>
                        <td width="20%">Sherlock</td>
                        <td width="20%">Holmes</td>
                        <td width="10%">Doyle</td>
                        <td width="10%">37</td>
                        <td width="40%">Ingenious</td>
                    </tr>
                    <tr>
                        <td width="20%">Captain</td>
                        <td width="20%">America</td>
                        <td width="10%">Marvel</td>
                        <td width="10%">39</td>
                        <td width="40%">Captain America</td>
                    </tr>
                    <tr>
                        <td width="20%">Peter</td>
                        <td width="20%">Parkar</td>
                        <td width="10%">Marvel</td>
                        <td width="10%">43</td>
                        <td width="40%">Spidy</td>
                    </tr>
                </tbody>
            </table>
        </li>
    </ul>
</div>
<br>
<br>

</body>

Answer 1

我不知道如何处理该插件。但您只需使用jQuery即可。只需分离该元素并附加在任何你想要的地方。

此插件使用此格式的每个过滤器输入的id。

#filter_tableSelector_columnIndex

所以你可以像这样轻松编写代码。

$('#filter_searchMe_0').css('width','100px').detach().appendTo( "#outSide" );

在此代码中，我删除了第一列的过滤器输入(column Index = 0)，并将其附加到表格的外边。

我从您的 DEMO

NEW FIDDLE

更新：

如果您想使用第一列进行过滤，请使用此$('#filter_searchMe_0')。

如果您想使用第二列进行过滤，请使用此$('#filter_searchMe_1')。

如果您想使用第三列进行过滤，请使用此$('#filter_searchMe_2')。

像这样，您也可以使用过滤器来处理下一列。

使用此代码过滤使用第3列。 $('#filter_searchMe_2').css('width','100px').detach().appendTo( "#outSide" );

tableutils过滤器输入移动到表外

1 个答案: