Is there a way to add Excel-like filtering to DataTables? It's surprising that such a widely used and advanced plugin doesn't have this feature already. If not, is there an easy way to implement it? Below are examples of advanced menu filters similar to Excel. Thank you!
Kendo UI:
YADCF: The Ultimate DataTables Column Filter Plugin for jQuery DataTables
Check out this live example for a demonstration or explore the demo below.
$(document).ready( function () {
var table = $('#example').DataTable();
yadcf.init(table, [{
column_number: 0
}, {
column_number: 1,
filter_type: "range_number_slider"
}, {
column_number: 2,
filter_type: "date"
}, {
column_number: 3,
filter_type: "auto_complete",
text_data_delimiter: ","
}, {
column_number: 4,
column_data_type: "html",
html_data_type: "text",
filter_default_label: "Select tag"
}]);
// BOOTSTRAP: Tweaks
$('.yadcf-filter-wrapper').addClass('input-group');
$('.yadcf-filter, .yadcf-filter-date', this).addClass('form-control input-sm');
$('.yadcf-filter-reset-button', this).addClass('btn btn-default btn-sm').wrap('<span class="input-group-btn"></span>');
});table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after, table.dataTable thead .sorting_asc_disabled::after, table.dataTable thead .sorting_desc_disabled::after {
top: 8px;
}
.yadcf-number-slider-filter-wrapper-inner {
width:100px !important;
}<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>jQuery DataTables</title>
<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/r/bs-3.3.5/dt-1.10.9/datatables.min.css" rel="stylesheet" type="text/css" />
<link href="http://yadcf-showcase.appspot.com/resources/css/jquery.dataTables.yadcf.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdn.datatables.net/r/bs-3.3.5/dt-1.10.9/datatables.min.js"></script>
<script src="http://yadcf-showcase.appspot.com/resources/js/jquery.dataTables.yadcf.js"></script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="table table-stripped table-bordered" id="example">
<thead>
<tr>
<th>Some Data</th>
<th>Numbers</th>
<th>Dates</th>
<th>Values</th>
<th>Tags</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Data 1</td>
<td>1000</td>
<td>01/24/2014</td>
<td>a_value,b_value</td>
<td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td>
</tr>
<!-- Remaining table rows removed for brevity -->
</tbody>
</table>
</body>
</html>My HTML table contains rows with a variety of content, including plain text characters and elements like radio buttons and lists. I want users to be able to copy-paste the table into MS Excel as plain text and have the radio button values replaced with "c ...
My current CMS, Liferay, heavily relies on jQuery for various functions. Recently, I introduced a new feature to our website using fancybox. However, I realized that this new addition was causing issues with other jQuery functionalities on the page. Remov ...
I am facing a challenge with 2 arrays retrieved from my MongoDB database. The first array is called users and it contains user objects structured like this: [{ email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1a1beb ...
Immediately rendering the following template, without waiting for the API call to complete. I came up with a solution using v-if to prevent elements from rendering until the data is available. However, this seems to go against the DRY principle as I have ...
My object has the following structure: Object {Dry Aged Ribeye(medium): "1" , Dry Aged Ribeye(rare): "1" , Dry Aged Ribeye(well): "1" , favorite_tables: "{"dc76e9f0c0006e8f919e0c515c66dbba3982f785":[]}" } I am trying to insert this into My ...
Can you explain the function of this particular file? Does this file handle all the GET and POST requests in a project? If so, wouldn't it become excessively long and complex for larger projects? I encountered an issue when trying to call a POST re ...
I am currently experiencing an issue with VUE 3 Vuelidate. In my project, I have 2 components that each use Vuelidate for validation (specifically a list with CRUD functionality implemented using modals). However, when I navigate from one component to anot ...
http://jsfiddle.net/herrturtur/ExWFH/ If you want to give this a try, follow these steps: Click the plus button. Double click on the newly created name field. Enter information into the fields. Press Enter. The era fields (from and until) will be disp ...
Encountering a 404 error when using quasar+vite in vueRouterMode: 'history' mode with paths containing a period/dot in the id? This issue has been discussed in various places: https://github.com/vitejs/vite/issues/2415 https://github.com/vitejs/ ...
When using AJAX post from jQuery to call two REST services on different domains for business logic, a CORS issue arises. By setting crossDomain: true in my AJAX call following Google references, it works fine without specifying headers. However, if I inc ...
Within this snippet, I am seeking to retrieve a default value from the API to populate a checkbox initially. I have employed the Material-UI Autocomplete component, which includes a defaultValue prop. Despite my efforts to utilize this prop, I am encounter ...
Utilizing both Vuetify and font-awesome icons has been a successful combination for my project. However, I am facing an issue where the 'fa-folders' icon is not displaying as expected: In the .ts file: import { library } from '@fortawesome/ ...
Looking for assistance here as I am fairly new to this. My goal is to transform the fullName string returned from a webapp UI using Selenium WebDriverIO. Here's what I have: const fullName = "Mr Jason Biggs"; The desired outcome should be structured ...
Looking to build a website that can identify the device name and model of visitors accessing the page from their devices. ...
I am currently using create-react-app for my project. As I now need redux-saga to handle async operations, I am encountering an issue with setting up sagas in a modular manner. When I say modular, I mean having one main sagas file that exports all the comp ...
Currently, I am utilizing the ArcGIS API for Javascript which can be found at this URL: The JavaScript code snippet I'm working with appears to be running asynchronously. Is there a way to convert it to run synchronously or potentially transform it i ...
I have been developing a web application using Google App Script and I currently have multiple versions of the same web app with various fields. Interestingly, when I run one version through a test deployment, it displays correctly as expected based on th ...
I'm currently working on a project where a user can upload a document and a Python script located on the server side in a MERN stack application will be executed using child processes to determine if it returns true or false. However, when I try to op ...
A successful demonstration can be found at: https://jsfiddle.net/hxyv40ra However, when attempting to incorporate this code within a Vue directive, the button event triggers and the console indicates that the class is removed, yet there is no visual chang ...
In order to enhance security measures, I need to prevent users from accessing or interacting with the php pages that will be utilized for ajax functionality. Is there a method available to determine if a page has been accessed through an ajax request or b ...