Bootstrap таблица не показывает некоторые фильтры - PullRequest
Новая
       0

Bootstrap таблица не показывает некоторые фильтры

0 голосов
/ 30 января 2020

Я пытался отобразить эту таблицу bootstrap с помощью data-filter-control, но все еще не смог этого сделать. Фильтры не работают двумя способами:

  1. Фильтр не отображает все категории, включенные в этот столбец
  2. Фильтр не работает вообще

Может кто-нибудь помочь мне разобраться? Ниже весь сценарий. Спасибо! 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...