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

时间:2014-06-04 12:34:59

标签: jquery twitter-bootstrap

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

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

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

enter image description here

3 个答案:

答案 0 :(得分:3)

仅供参考,如果您想将字段搜索的移动位置向左移动,您可以使用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/

答案 1 :(得分:0)

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

$('#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');

现在看起来像附件enter image description here

答案 2 :(得分:0)

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

$('#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"]'。(默认类型可以在浏览器中检查)