草庐IT

javascript - Bootstrap 表过滤不起作用

coder 2023-08-07 原文

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

    <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 脚本来处理来自服务器的错误

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

最佳答案

如果你想用 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"
	}
  ]
}

关于javascript - Bootstrap 表过滤不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33670454/

有关javascript - Bootstrap 表过滤不起作用的更多相关文章

  1. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序,我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件,包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式,但它

  2. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象,为什么它会起作用? - 2

    如果您尝试在Ruby中的nil对象上调用方法,则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而,有一个tryRails中的方法,如果它被发送到一个nil对象,它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常? 最佳答案 像Ruby中的所有其他对象

  3. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式? 最佳答案 您可以像这样为日期选择器提供额外的选项,而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义,我们在StackOverflow上找到一个类似的问题: https://s

  4. ruby-on-rails - 在 Controller 中干净地处理多个过滤器(参数) - 2

    我有一个名为Post的类,我需要能够适应以下场景:如果用户选择了一个类别,则只显示该类别的帖子如果用户选择了一种类型,则只显示该类型的帖子如果用户选择了一个类别和类型,则只显示该类别中该类型的帖子如果用户没有选择任何内容,则显示所有帖子我想知道我的Controller是否不可避免地会因大量条件语句而显得粗糙...这是我解决此问题的错误方法-有谁知道我如何才能做到这一点?classPostsController 最佳答案 您最好遵循“胖模型,瘦Controller”的惯例,这意味着您应该将这种逻辑放在模型本身中。Post类应该能够报告

  5. ruby-on-rails - 如何处理 Grape 中特定操作的过滤器之前? - 2

    我正在我的Rails项目中安装Grape以构建RESTfulAPI。现在一些端点的操作需要身份验证,而另一些则不需要身份验证。例如,我有users端点,看起来像这样:moduleBackendmoduleV1classUsers现在如您所见,除了password/forget之外的所有操作都需要用户登录/验证。创建一个新的端点也没有意义,比如passwords并且只是删除password/forget从逻辑上讲,这个端点应该与用户资源。问题是Grapebefore过滤器没有像except,only这样的选项,我可以在其中说对某些操作应用过滤器。您通常如何干净利落地处理这种情况?

  6. ruby-on-rails - "assigns"在 Ruby on Rails 中有什么作用? - 2

    我目前正在尝试学习RubyonRails和测试框架RSpec。assigns在此RSpec测试中做什么?describe"GETindex"doit"assignsallmymodelas@mymodel"domymodel=Factory(:mymodel)get:indexassigns(:mymodels).shouldeq([mymodel])endend 最佳答案 assigns只是检查您在Controller中设置的实例变量的值。这里检查@mymodels。 关于ruby-o

  7. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  8. ruby-on-rails - Rails 3 - 过滤器链暂停为 :authentication rendered or redirected - 2

    我仍然收到标题中的“错误”消息,但不知道如何解决。在ApplicationController中,classApplicationController在routes.rb#match'set_activity_account/:id/:value'=>'users#account_activity',:as=>:set_activity_account--thisdoesn'tworkaswell..resources:usersdomemberdoget:action_a,:action_bendcollectiondoget'account_activity'endend和User

  9. ruby-on-rails - ActiveAdmin 自定义选择过滤器下拉名称 - 2

    对于用户模型,我有一个过滤器来检查用户的预订状态,该状态由整数值(0、1或2)表示。UserActiveAdmin索引页上的过滤器是通过以下代码实现的:filter:booking_status,as::select然而,这会导致下拉选项为0、1或2。当管理员用户从下拉列表中选择它们时,我更愿意自己将它们命名为“未完成”、“待定”和“已确认”之类的名称。有没有办法在不改变booking_status在模型中的表示方式的情况下做到这一点? 最佳答案 假设booking_status是模型中的枚举字段,您可以使用:过滤器:booking

  10. ruby - 字符串文字前面的 * 在 ruby​​ 中有什么作用? - 2

    这段代码似乎创建了一个范围从a到z的数组,但我不明白*的作用。有人可以解释一下吗?[*"a".."z"] 最佳答案 它叫做splatoperator.SplattinganLvalueAmaximumofonelvaluemaybesplattedinwhichcaseitisassignedanArrayconsistingoftheremainingrvaluesthatlackcorrespondinglvalues.Iftherightmostlvalueissplattedthenitconsumesallrvaluesw

随机推荐