自定义Bootstrap数据表过滤器文件并放置占位符

Question

我需要自定义我的Bootstrap数据表搜索字段，并需要在其中放置占位符。而且我还需要隐藏分页下拉并将搜索位置改为左侧。请查看附带的屏幕截图以获得更多说明。

我尝试使用jQuery作为占位符代码，但它不起作用：

$('#demo-dtable-01_filter input').attr('placeholder','Type in customer name, date or amount');

Answer 1

仅供参考，如果您想将字段搜索的移动位置向左移动，您可以使用Dom Positioning

$(document).ready(function () {
    $('#example').dataTable({
        "dom": '<"pull-left"f>rt<"bottom"ip>'
    });
    $('#example').removeClass('display').addClass('table table-striped table-bordered');
    $('.dataTables_filter input[type="search"]').attr('placeholder','Type in customer name, date or amount').css({'width':'250px','display':'inline-block'});
});

http://jsfiddle.net/YfhNA/

Answer 2

我得到了一个解决方案，最后它正常工作

$('#demo-dtable-01_filter').find('input[type=text]').attr('placeholder','Type in customer name, date or amount');
$('#demo-dtable-01_filter').find('input[type=text]').addClass('span8');
$('.dt_header>.row-fluid').children().first().addClass('hide');
$('.dt_header>.row-fluid').children().eq(1).css('margin-left','0px');
$('.dt_header>.row-fluid').children().eq(1).children().eq(0).addClass('pull-left span12');
$('.dataTables_filter label').css('width','392px');
$('.estimatedbrd .dataTables_filter label').css('float','left');

现在看起来像附件

Answer 3

您可以将占位符分配给数据表搜索字段，如下所示。

$('#example_filter.dataTables_filter input[type="search"]').attr('placeholder', 'Search By ...');

其中

<table id="example"> ..... </table>

**Note:**

1. Datatable API通过将后缀附加为＆＃39; _filter＆＃39;来自动为给定的表ID创建过滤器。
2. 输入类型必须是＆＃39;搜索＆＃39; input[type="search"]'。（默认类型可以在浏览器中检查）