Javascript 引导表未显示某些筛选器_Javascript_Html_Bootstrap 4

Javascript 引导表未显示某些筛选器

javascript html bootstrap-4

Javascript 引导表未显示某些筛选器,javascript,html,bootstrap-4,Javascript,Html,Bootstrap 4,我一直在尝试用数据过滤器控件显示这个引导表，但我仍然不能这样做。过滤器的工作方式有两种：过滤器不会显示该列中包含的所有类别过滤器根本不工作有人能帮我弄清楚吗？下面是整个脚本。谢谢 <!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://static.

我一直在尝试用数据过滤器控件显示这个引导表，但我仍然不能这样做。过滤器的工作方式有两种：

过滤器不会显示该列中包含的所有类别过滤器根本不工作有人能帮我弄清楚吗？下面是整个脚本。谢谢

<!DOCTYPE html>

<html lang="en"><head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">
<title>CodePen - Bootstrap Table - Filter control</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css">
<link rel="stylesheet" href="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">


<style>
.container {
    width: 1100px;
    padding: 2em;
}

.bold-blue {
    font-weight: bold;
    color: #0277BD;
}
</style>

<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</head>


<body translate="no">
<div class="container">
<h1>Bootstrap table with filters</h1>





<div id="toolbar">
        <select class="form-control">
                <option value="">Export Basic</option>
                <option value="all">Export All</option>
                <option value="selected">Export Selected</option>
        </select>
</div>

<table id="table"
             data-toggle="table"
             data-search="true"
             data-filter-control="true"
             data-show-export="true"
             data-click-to-select="true"
             data-toolbar="#toolbar">
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="Income Assets" data-filter-control="select" data-sortable="true">Income Assets</th>
            <th data-field="Employed Full" data-filter-control="select" data-sortable="true">Employed Full</th>
            <th data-field="Bachelor" data-filter-control="select" data-sortable="true">Bachelor</th>
            <th data-field="High School" data-filter-control="select" data-sortable="true">High School</th>
            <th data-field="English" data-filter-control="select" data-sortable="true">English</th>
            <th data-field="Age" data-filter-control="select" data-sortable="true">Age</th>
            <th data-field="HH Member +5" data-filter-control="select" data-sortable="true">HH Member +5</th>
            <th data-field="Health" data-filter-control="select" data-sortable="true">Health</th>
            <th data-field="Benefit M1" data-filter-control="select" data-sortable="true">Benefit M1</th>
            <th data-field="Cit" data-filter-control="select" data-sortable="true">Cit</th>
            <th data-field="Sample Used Benefits" data-filter-control="select" data-sortable="true">Sample Used Benefits</th>
            <th data-field="Total Sample" data-filter-control="select" data-sortable="true">Total Sample</th>
            <th data-field="Total Weighted Pop." data-filter-control="select" data-sortable="true">Total Weighted Pop.</th>
            <th data-field="Weighted Used Benefits" data-filter-control="select" data-sortable="true">Weighted Used Benefits</th>
            <th data-field="Use Rate" data-filter-control="select" data-sortable="true">Use Rate</th>
        </tr>
    </thead>
    <tbody>
        <tr><td class="bs-checkbox "><input data-index="1" name="btSelectItem" type="checkbox"></td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>7218</td><td>38725</td><td>273927698.951485</td><td>44936410.729928</td><td>0.164044785912237</td></tr>
        <tr><td class="bs-checkbox "><input data-index="2" name="btSelectItem" type="checkbox"></td><td>*</td><td>*</td><td>*</td><td>*</td><td>YES</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>6902</td><td>37851</td><td>267669426.039534</td><td>42804442.2445731</td><td>0.159915321215098</td></tr>
        <tr><td class="bs-checkbox "><input data-index="3" name="btSelectItem" type="checkbox"></td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>YES</td><td>6818</td><td>36928</td><td>259231128.693021</td><td>41949287.17618</td><td>0.161821951660196</td></tr>
        <tr><td class="bs-checkbox "><input data-index="4" name="btSelectItem" type="checkbox"></td><td>*</td><td>*</td><td>*</td><td>*</td><td>YES</td><td>*</td><td>*</td><td>*</td><td>*</td><td>YES</td><td>6638</td><td>36499</td><td>256169883.708981</td><td>40725041.7232831</td><td>0.158976695986435</td></tr>
        <tr><td class="bs-checkbox "><input data-index="5" name="btSelectItem" type="checkbox"></td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>YES</td><td>*</td><td>*</td><td>5445</td><td>32836</td><td>240442125.749909</td><td>35317041.6922081</td><td>0.146883752512413</td></tr>
    </tbody>
</table>
</div>




<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-9bf952ccbbd13c245169a0a1190323a27ce073a3d304b8c0fdf421ab22794a58.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/editable/bootstrap-table-editable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/export/bootstrap-table-export.js"></script>
<script src="https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.js"></script>
<script id="rendered-js">


//exporte les données sélectionnées
var $table = $('#table');
$(function () {
  $('#toolbar').find('select').change(function () {
    $table.bootstrapTable('refreshOptions', {
      exportDataType: $(this).val() });

  });
});

var trBoldBlue = $("table");

$(trBoldBlue).on("click", "tr", function () {
  $(this).toggleClass("bold-blue");
});
//# sourceURL=pen.js
    </script>


</body></html>

您的控制台中是否有任何错误？这是弹出的内容：未捕获错误：语法错误，无法识别的表达式：。总加权Pop。在Function.gb.error jquery.js:1453 at gb.tokenize jquery.js:2070 at gb.select jquery.js:2474 at Function.gb[as find]jquery.js:850 at n.fn.init.find jquery.js:2690 at new n.fn.init jquery.js:2798 at n jquery.js:76 at String。bootstrap table filter control.js:344 at Function.each jquery.js:374 at BootstrapTable.initBody bootstrap table filter control.js:335因此请检查此错误的来源，导致此问题的地方存在语法错误，但问题中添加的代码中没有语法错误我删除了Total Weighted Pop的列。这似乎是引起麻烦的原因。现在控制台没有抛出错误，过滤器仍然不工作。。。