1
Я следующий код (фрагмент кода прилагается):поиск столбца не удается после изменения значения ячейки
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>
Exact matches overview
</title>
\t
<script type="text/javascript" src="/static/script/api_recs.js"></script>
<script type="text/javascript" src="/static/script/site_filter.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.css"/>
<script type="text/javascript"
src="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.13/sorting/natural.js"></script>
\t
<style type="text/css">
tfoot {
display: table-header-group;
}
html {
width: 58%;
}
.red_background {
background-color: #ffe4e9 !important;
}
.red_bold_font {
font-weight: bolder;
color: red;
}
</style>
</head>
<body>
\t <img id="loader" src="/static/img/loader_animation_large.gif"
\t style="
\t \t width:36px;
\t \t height:36px;
\t \t display: none;
\t \t position:absolute;
\t \t top:50%;
\t \t left:50%;
\t \t margin-top:-18px;
\t \t margin-left:-18px;"/>
\t <p><a href="/accounts/logout/">Logout</a> | <a href="/accounts/profile/">Home</a></p>
<div id="title">
<b style="font-size:200%">Exact matches overview<br></b>
</div>
<table id='matches_table-id' class="display" cellspacing="0" style="float: left;">
<thead>
<tr>
<th>Date</th>
<th>Customer name</th>
<th>Customer SKU count</th>
<th>Competitor name</th>
<th>Total matches</th>
<th>Total matches 2 weeks ago</th>
<th>Matches diff</th>
<th>Coverage (%)</th>
<th>Coverage 2 weeks ago (%)</th>
<th>Coverage diff (%)</th>
<th>Competitor benchmark coverage (%)</th>
<th>Benchmark coverage diff (%)</th>
<th>violated</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Date</th>
<th>Customer name</th>
<th>Customer SKU count</th>
<th>Competitor name</th>
<th>Total matches</th>
<th>Total matches 2 weeks ago</th>
<th>Matches diff</th>
<th>Coverage (%)</th>
<th>Coverage 2 weeks ago (%)</th>
<th>Coverage diff (%)</th>
<th>Competitor benchmark coverage (%)</th>
<th>Benchmark coverage diff (%)</th>
<th>violated</th>
</tr>
</tfoot>
<tbody>
<tr>
<td><span>2017-02-20 00:00</span></td>
<td><span>bestonix (-104)</span></td>
<td><span>2461</span></td>
<td><span>target.com (-106)</span></td>
<td><span>517</span></td>
<td><span>625</span></td>
<td><span>-108</span></td>
<td><span>21.0%</span></td>
<td><span>34.4%</span></td>
<td><span>-13.4%</span></td>
<td><span>60.0%</span></td>
<td><span>-39.0%</span></td>
<!-- initialize invisible "violated" column -->
<td><span>not</span></td>
</tr>
<tr>
<td><span>2017-02-20 00:00</span></td>
<td><span>bestonix (-104)</span></td>
<td><span>2461</span></td>
<td><span>walmart.com (-105)</span></td>
<td><span>1052</span></td>
<td><span>1014</span></td>
<td><span>38</span></td>
<td><span>42.7%</span></td>
<td><span>55.7%</span></td>
<td><span>-13.0%</span></td>
<td><span>60.0%</span></td>
<td><span>-17.3%</span></td>
<!-- initialize invisible "violated" column -->
<td><span>not</span></td>
</tr>
<tr>
<td><span>2017-02-20 00:00</span></td>
<td><span>bestonix (-104)</span></td>
<td><span>2461</span></td>
<td><span>amazon_bestonix (278)</span></td>
<td><span>1347</span></td>
<td><span>1309</span></td>
<td><span>38</span></td>
<td><span>54.7%</span></td>
<td><span>72.0%</span></td>
<td><span>-17.2%</span></td>
<td><span>60.0%</span></td>
<td><span>-5.3%</span></td>
<!-- initialize invisible "violated" column -->
<td><span>not</span></td>
</tr>
</tbody>
</table>
<div style="clear: both"></div>
<script>
$(document).ready(function() {
var BENCHMARK_DIFF_COL = 11;
var COVERAGE_COL = 7;
var COVERAGE_DIFF_COL = 9;
var VIOLATED_COL = 12;
// Setup column search - add a text input to each footer cell
$('#matches_table-id tfoot th').each(function() {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Filter " style="width: 50px"' + " />");
});
// DataTable
var table = $('#matches_table-id').DataTable({
//conditional formatting
createdRow: function (row, data, index) {
if (parseFloat($(data[BENCHMARK_DIFF_COL]).text()) < parseFloat(-20)) {
$(row).addClass("red_background");
$(row).find('td:eq(' + BENCHMARK_DIFF_COL + ')').addClass("red_bold_font");
$(row).find('td:eq(' + VIOLATED_COL + ')').html("<span>violated</span>");
}
if (parseFloat($(data[COVERAGE_COL]).text()) < parseFloat(10)) {
$(row).addClass("red_background");
$(row).find('td:eq(' + COVERAGE_COL + ')').addClass("red_bold_font");
$(row).find('td:eq(' + VIOLATED_COL + ')').html("<span>violated</span>");
}
if (parseFloat($(data[COVERAGE_DIFF_COL]).text()) < parseFloat(-15)) {
$(row).addClass("red_background");
$(row).find('td:eq(' + COVERAGE_DIFF_COL + ')').addClass("red_bold_font");
$(row).find('td:eq(' + VIOLATED_COL + ')').html("<span>violated</span>");
}
},
//disable ordered column style class change on sorting
"orderClasses": false,
dom: 'l Brtip',
"aLengthMenu": [
[20, 50, 100, -1],
[20, 50, 100, "All"]]
})
;
// Apply the search
table.columns().every(function() {
var that = this;
$('input', this.footer()).on('keyup change', function() {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
});
</script>
</body>
</html>Как вы можете видеть, я меняю значение последнего столбца в соответствии со значением в других столбцах. Проблема: после изменения значений в этом столбце поиск больше не ведет себя так, как ожидалось. кажется, что поиск ведет себя так, как будто я никогда не менял значения в этих ячейках и видел предыдущие значения по умолчанию из инициализации таблицы html. Я попытался обернуть и развернуть новые значения с помощью тега <span>, но не смог решить проблему. Что я упускаю здесь?
Вы пытались переместить код ввода событий в drawCallback? – rad11
Можете ли вы объяснить, что это будет сделано? –