我有一个关于 https://github.com/Dynamitable/Dynamitable 的问题.
当我尝试过滤结果时，它不会显示完全匹配的结果。例如，当我在过滤框中输入 1 时，它会带来包括 1 在内的所有值。当我尝试过滤时，是否可以使其仅显示确切的数字？
感谢您的帮助!
最佳答案
在这里我更改了库并添加了您想要的精确匹配功能。 查看分数过滤器输入，我添加了一个属性 searchType="exact"它将搜索包含此属性的那些输入的完全匹配
在 this.filter 中进行了更改
this.filter = function filter(index, matches, searchType) {
if (searchType != "exact" || matches.length<=0 )
{
var regex = new RegExp(matches, 'i');
dynamitableCore.getRows().each(function () {
if(true !== regex.test(dynamitableCore.getValue(index, $(this)))) {
$(this).hide();
}
});
}else {
// added this
dynamitableCore.getRows().each(function () {
var v = dynamitableCore.getValue(index, $(this));
if(v != matches) {
$(this).hide();
}
});
}
return this;
};
!function($){ 'use strict';
$.fn.dynamitable = function(options) {
/**********************************************
* dynamitable
**********************************************/
var dynamitable = this;
/**********************************************
* dynamitableCore
**********************************************/
var dynamitableCore = new (function($dynamitable) {
/**********************************************
* dynamitableCore.getIndex($field)
*
* get the index of a field
*
* return integer
**********************************************/
this.getIndex = function($field) {
return $field.parents('tr').children('td, th').index($field);
};
/**********************************************
* dynamitableCore.getBody()
*
* get the body of the table
*
* return dom
**********************************************/
this.getBody = function() {
return $dynamitable.find('tbody');
};
/**********************************************
* dynamitableCore.getRows()
*
* get all row inside the body of the table
*
* return dom
**********************************************/
this.getRows = function() {
return this.getBody().children('tr');
};
/**********************************************
* dynamitableCore.getField(index, $row)
*
* get a field
*
* return dom
**********************************************/
this.getField = function(index, $row) {
return $row.children('td, th').eq(index);
};
/**********************************************
* dynamitableCore.getValue(index, $row)
*
* get a field value
*
* return string
**********************************************/
this.getValue = function(index, $row) {
return this.getField(index, $row).text();
};
})($(this));
/**********************************************
* dynamitable.filterList
*
* list of filter selector
*
* array of string
**********************************************/
this.filterList = [];
/**********************************************
* dynamitable.displayAll()
*
* show all <tr>
*
* return dynamitable
**********************************************/
this.displayAll = function() {
dynamitableCore.getRows().each(function() {
$(this).show();
});
return this;
};
/**********************************************
* dynamitable.filter(index, matches)
*
* hide all <tr> that doen't martch
*
* - index (integer): index of the colum to filter
* - matches (string) : string to search on the colum
*
* return dynamitable
**********************************************/
this.filter = function filter(index, matches, searchType) {
if (searchType != "exact" || matches.length<=0 )
{
var regex = new RegExp(matches, 'i');
dynamitableCore.getRows().each(function () {
if(true !== regex.test(dynamitableCore.getValue(index, $(this)))) {
$(this).hide();
}
});
}else {
dynamitableCore.getRows().each(function () {
var v = dynamitableCore.getValue(index, $(this));
if(v != matches) {
$(this).hide();
}
});
}
return this;
};
/**********************************************
* dynamitable.addFilter(selector)
*
* add filter event on element inside the table heading
*
* - selector (string) : selector of the element that trigger the event
*
* return dynamitable
**********************************************/
this.addFilter = function addFilter(selector) {
// add the selector on the filter list
dynamitable.filterList.push(selector);
// the filter
var filterAction = function() {
dynamitable.displayAll();
$(dynamitable.filterList).each(function(index, selector) {
$(dynamitable).find(selector).each(function() {
var $this = $(this);
var searchType = $this.attr("searchType"); // eg string or decimal
dynamitable.filter(dynamitableCore.getIndex($this.parent('td, th')), $this.val(), searchType);
});
});
};
// attach the filter action to the selector
$(selector).on('change keyup keydown', filterAction);
// initialization
filterAction();
return this;
};
/**********************************************
* dynamitable.addSorter(selector, order)
*
* add soter event on element inside the table heading
*
* - selector (string) : selector of the element that trigger the event
* - order (string) : sorting order [asc, desc]
*
* return dynamitable
**********************************************/
this.addSorter = function addSorter(selector, order) {
$(dynamitable).find(selector).each(function() {
var $this = $(this);
var index = dynamitableCore.getIndex($this.parent('td, th'));
$this.on('click', function() { dynamitable.sorter(index, order); });
});
return this;
};
/**********************************************
* dynamitable.sorter(index, order)
*
* - index (integer): index of the colum to sorter
* - order (string) : sorting order [asc, desc]
*
* return dynamitable
**********************************************/
this.sorter = function sorter(index, order) {
dynamitableCore.getBody().append(dynamitableCore.getRows().detach().sort(function(row_a, row_b) {
var value_a = dynamitableCore.getValue(index, $(row_a));
var value_b = dynamitableCore.getValue(index, $(row_b));
var order_desc = ('desc' === order) ? true : false;
// numeric order mode
if(value_a.replace(/[^\d-]/g, '') !== '' && value_b.replace(/[^\d-]/g, '') !== '') {
value_a = parseFloat(value_a.replace(/[^\d,.\-\+]/g, ''));
value_b = parseFloat(value_b.replace(/[^\d,.\-\+]/g, ''));
}
if(value_a === value_b) {
return 0;
}
return (value_a > value_b) ? order_desc ? 1 : -1 : order_desc ? -1 : 1;
}));
return this;
};
return this;
};
/**********************************************
* Dynamitable trigger
**********************************************/
$(document).find('.js-dynamitable').each(function(){
$(this).dynamitable()
.addFilter('.js-filter')
.addSorter('.js-sorter-asc', 'asc')
.addSorter('.js-sorter-desc', 'desc')
;
});
}(jQuery);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dynamitable</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<style>
<!--
.glyphicon {
cursor: pointer;
}
input, select{
width: 100%;
}
.second, .glyphicon-chevron-down, .glyphicon-chevron-up{
color: red;
}
-->
</style>
</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1">
<h1><span class="first">Dynami</span><span class="second">table</span></h1>
<div class="table-responsive">
<!-- Initialization
* js-dynamitable => dynamitable trigger (table)
-->
<table class="js-dynamitable table table-bordered">
<!-- table heading -->
<thead>
<!-- Sortering
* js-sorter-asc => ascending sorter trigger
* js-sorter-desc => desending sorter trigger
-->
<tr>
<th>Name
<span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span>
<span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span>
</th>
<th>Email
<span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span>
<span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span>
</th>
<th>Age
<span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span>
<span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span>
</th>
<th>Account
<span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span>
<span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span>
</th>
<th>Scoring
<span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span>
<span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span>
</th>
</tr>
<!-- Filtering
* js-filter => filter trigger (input, select)
-->
<tr>
<th>
<!-- input filter -->
<input class="js-filter form-control" type="text" value="">
</th>
<th>
<!-- select filter -->
<select class="js-filter form-control">
<option value=""></option>
<option value="@dynamitable.com">dynamitable.com</option>
<option value="@sample.com">Sample</option>
</select>
</th>
<th><input class="js-filter form-control" type="text" value=""></th>
<th><input class="js-filter form-control" type="text" value=""></th>
<th><input class="js-filter form-control" searchType="exact" type="text" value=""></th>
</tr>
</thead>
<!-- table body -->
<tbody>
<tr>
<td>Freddy Krueger</td>
<td>freddy.krueger@sample.com</td>
<td class="text-right">122</td>
<td class="text-right">2300$</td>
<td class="text-right">+15</td>
</tr>
<tr>
<td>Clint Eastwood</td>
<td>clint.eastwood@sample.com</td>
<td class="text-right">62</td>
<td class="text-right">48 500$</td>
<td class="text-right">+12</td>
</tr>
<tr>
<td>Peter Parker</td>
<td>peter.parker@dynamitable.com</td>
<td class="text-right">22</td>
<td class="text-right">210$</td>
<td class="text-right">-5</td>
</tr>
<tr>
<td>Bruce Wayne</td>
<td>bruce.wayne@dynamitable.com</td>
<td class="text-right">42</td>
<td class="text-right">-8500$</td>
<td class="text-right">+2</td>
</tr>
<tr>
<td>Jackie Chan</td>
<td>jackie.chan@sample.com</td>
<td class="text-right">32</td>
<td class="text-right">-250.55$</td>
<td class="text-right">0</td>
</tr>
<tr>
<td>Bruce Lee</td>
<td>bruce.lee@sample.com</td>
<td class="text-right">32</td>
<td class="text-right">510$</td>
<td class="text-right">-7</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- jquery -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- dynamitable -->
</body>
</html>关于javascript - 与 Dynamitable 库精确匹配，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54335783/