引导表过滤不起作用

Posted

技术标签:

【中文标题】引导表过滤不起作用【英文标题】:Bootstrap table filtering not working 【发布时间】:2016-02-13 17:15:23 【问题描述】:

我想为引导表添加过滤。我添加了两个属性,我在下面的代码中将它们四舍五入。为什么它不起作用?我还应该做什么?

    <table id="clients-table" class="table table-striped table-condensed" 
           data-toggle="table" data-show-toggle="true" data-cache="false" data-show-refresh="true"
           data-url="../data.json"
           //-----------------------------------------------------
           data-filter-control="true"
           //-----------------------------------------------------
           data-side-pagination="server"
           data-search="true" data-sort-name="Id" data-sort-order="desc"
           data-pagination="true" data-page-size="25">
        <thead>
            <tr>
                <th data-field="Id" data-sortable="true">Id</th>
                <th data-field="Email" data-sortable="true">E-Mail</th>
                <th data-field="CompanyName" data-sortable="true">Firma</th>
                <th data-field="Name" data-sortable="true">Imię i nazwisko</th>
                <th data-field="Phone" data-sortable="true">Nr telefonu</th>
                <th data-field="UserType" data-sortable="true">Typ</th>
                <th data-field="PricingType" data-sortable="true" 
                //----------------------------------------------------------
                    data-filter-control="select" 
                //----------------------------------------------------------
                    >Cennik</th>
                <th data-field="LastSynchronizationOn" data-sortable="true">Synchronizacja</th>
            </tr>
        </thead>
    </table>

我还有一些 JS scipt 来处理来自服务器的错误

   $('#clients-table').bootstrapTable(
        onLoadError: function (status) 
            SetErrorMessage('Wystąpił błąd serwera podczas wczytywania danych. Skontaktuj się z administratorem.');
        
    );

我还附上了这个脚本

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/locale/bootstrap-table-pl-PL.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter/bootstrap-table-filter.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>

【问题讨论】:

旁白: 这些// cmets 背后的故事是什么? html cmets 是&lt;!-- ... --&gt; 【参考方案1】:

如果你想用 select 过滤,我认为它有效:

<!DOCTYPE html>
<html>
<head>
	<title></title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" type="text/css" href="http://bootstrap-table.wenzhixin.net.cn/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

	<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/locale/bootstrap-table-pl-PL.min.js"></script>

	<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter/bootstrap-table-filter.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>

</head>
<body>
<table id="clients-table" class="table table-striped table-condensed" 
           data-toggle="table" 
           data-show-toggle="true" 
           data-cache="false" 
           data-show-refresh="true"
           data-url="data.json"
           data-filter-control="true"
           data-side-pagination="server"
           data-search="true" 
           data-sort-name="Id" 
           data-sort-order="desc"
           data-pagination="true" 
           data-page-size="25">
        <thead>
            <tr>
                <th data-field="Id" data-sortable="true">Id</th>
                <th data-field="Email" data-sortable="true">E-Mail</th>
                <th data-field="PricingType" data-sortable="true" data-filter-control="select">Cennik</th>
                <th data-field="LastSynchronizationOn" data-sortable="true">Synchronizacja</th>
            </tr>
        </thead>
    </table>

  <script>
    var $table = $('#clients-table');
    
    $table.bootstrapTable();
  </script>
</body>
</html>

还有你的 data.json:


  "total": 800,
  "rows": [
  	
		"Id": 1,
		"Email": "email@gmail.com",
		"PricingType": "Value 1",
		"LastSynchronizationOn": "date"
	,
	
		"Id": 2,
		"Email": "other@gmail.com",
		"PricingType": "Value 2",
		"LastSynchronizationOn": "date"
	
  ]

【讨论】:

感谢您的回答,我附上了 CSS 文件,但没有这个“bootstrap-table.wenzhixin.net.cn/assets/bootstrap/css/…”。当我链接它时,我收到有关 CORS 的错误“来自源的字体'bootstrap-table.wenzhixin.net.cn'已被跨源资源共享策略阻止加载:请求的资源上不存在'Access-Control-Allow-Origin'标头。来源'localhost:1294' 因此不允许访问。”你知道我应该改变什么吗? 你输入: var $table = $('#clients-table'); $table.bootstrapTable(); 我更新了我的帖子,之前有类似的代码。请看这个 你的data.json,有同样的结构吗? “行”:[] 是的,结构是一样的。我看到从 db 读取的行,但我没有看到过滤器输入。过滤器生成的html是“”

以上是关于引导表过滤不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Kendo UI 网格过滤器在引导模式中不起作用

通过引导表单击单元格不起作用

减少引导表宽度,colspan 不起作用

引导表固定标题不起作用

引导表分页下拉菜单不起作用 - Rails

表单验证在引导程序中不起作用