Searching through multiple columns in datatables

I encountered an issue with searching multiple columns in my serverside datatables. Individual column searches work fine, but when trying to search on more than one column simultaneously, the filter does not function as expected. For example, searching by "name" or "start_date" individually works, but a search for both at the same time does not yield the correct results. Here is the code snippet I am working with:

//my script: 
var table = $('#dataTables');

// begin first table
table.dataTable({

"ajax": {
"url": "<?php echo site_url('leader') ?>",
"type": "POST",
"data": function(d) {
d.full_name = $('#full_name').val(); 
d.start_date = $('#start_date').val(); //what is the correct code?
d.end_date = $('#end_date').val(); //what is the correct code?

},
},
......
......
$('#btn-search').click(function(){
var data_tables  = $('#dataTables').DataTable();
data_tables
.search( this.value )
.draw();
})
<!-- my view: -->
<div class="form-inline">
<div class="form-group">
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name"/>
</div>
                    
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
    <input type="text" name="start_date" class="form-control" readonly id="start_date" size="8">
    <span class="input-group-btn">
    <button class="btn default" type="button">
        <i class="fa fa-calendar"></i>
    </button>
    </span>
</div>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="end_date" class="form-control" readonly id="end_date" size="8">
<span class="input-group-btn">
<button class="btn default" type="button">
    <i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
 <button class="btn btn-warning" id="btn-search">Search</button>
</div>

serverside:

if ($full_name) 
{
$where = "And full_name = '$full_name'";
}
else if($start_date) 
{
$where = "And start_date >= to_date('$start_date','DD-MM-YYYY') ";
}
else if($end_date) 
{
$where = "And end_date <= to_date('$end_date','DD-MM-YYYY') ";
}

else
{
$where = " "; //how to combine 3 above
}

How can I create conditions for multi-column searching in datatables?

Answer №1

Your backend code requires some modifications. Consider implementing the following changes:

$where = "";
if (!empty($full_name))
{
    $where .= "AND full_name = '$full_name' ";
}
if(!empty($start_date))
{
    $where .= "AND start_date >= to_date('$start_date','DD-MM-YYYY') ";
}

if(!empty($end_date))
{
    $where = "AND end_date <= to_date('$end_date','DD-MM-YYYY') ";
}

As a side note: You have tagged this question as Codeigniter related - may I ask why you are not utilizing the query builder? Your current approach seems somewhat insecure.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be the reason for the undefined value of my ID retrieved from the next JS router.query upon page refresh?

When using the id obtained from the next router.query to dynamically render elements, it works fine when accessing the room from next/link. However, upon refreshing the page, an error is thrown. https://i.stack.imgur.com/yEjGS.png Below is the code snipp ...

What are the steps for testing React components when they are wrapped by ThemeProvider/withStyle?

Is there a way to properly test a component that is wrapped with withStyle, as it seems the theme object does not pass through the component. Any suggestions on best practices for achieving this? I am considering using createShallow() and dive() methods t ...

Exploring nested JSON data in Vue.js

In my attempt to access nested JSON within an array using Vue for a simple search functionality, I encountered a problem. Each school is encapsulated in a "hit" array, causing the system to perceive only one result of "hit" instead of returning data for ea ...

The webpage is missing a rendered React component even though it should be displayed

I am facing an issue where a React component is not appearing on the webpage despite being rendered. I have provided the code and screenshots of the components below for reference. Below is the snippet from the "App.jsx" file: function createCard ...

Image remains fluid within a static div without resizing

Any assistance would be greatly appreciated. I am currently facing an issue with a fixed div that is floating at the bottom of the screen, serving as ad space for the mobile version of a website. The problem arises when attempting to resize the browser win ...

Angular Redirect Function: An Overview

In the Angular project I'm working on, there is a function that should navigate to the home when executed. Within this function, there is a condition where if true, it should redirect somewhere. if (condition) { location.url('/home') ...

Verifying dynamic number inputs generated using JavaScript values and calculating the total with a MutationObserver

Preamble: I've referenced Diego's answer on dynamic field JS creation and Anthony Awuley's answer on MutationObserver for the created fields. After extensive searching, I found a solution that meets my needs, but it feels somewhat bulky des ...

What steps should I take to make sure that the types of React props are accurately assigned?

Dealing with large datasets in a component can be challenging, but I have found a solution by creating a Proxy wrapper around arrays for repeated operations such as sorting. I am looking to ensure that when the data prop is passed into my component as an ...

The dataset remains undefined within the context of Vue.js

I am attempting to utilize the dataset property in Vue to retrieve the data-attribute of an element. Here is how I am implementing it: <ul id="filter"> <li><a class="filter-item" v-on:click="filterItems" data-letter="a" href="#"> ...

Preserving variable scope in JavaScript even after defining a function

I am facing an issue with my JavaScript code that involves invoking a function within a function: var obj = { // returns the function with prevent default prepended. run: function(functor, context){ return function(e){ e.preventDefault(); ...

Eliminate the div element using jQuery if it contains a line break tag but no text

I am faced with a situation on a page where some div elements contain content while others only have a BR tag. I am attempting to remove the div elements that contain only the BR tag. Below is the HTML format in question: Here is an example of one type: ...

Sending Django Variable With Javascript

As a newcomer to Javascript, I am grappling with retrieving the value of a variable from my HTML form. My current code seems to be somewhat functional - I added an alert to test the logic and found that the else statement is working fine. However, I'm ...

When submitting a form with the jQueryForm plugin, take action on the form by selecting it with `$(this)`

I have a situation where I have multiple forms on one page and am utilizing the jQuery Form plugin to manage them without having to reload the entire page. The issue arises when I need some sort of visual feedback to indicate whether the form submission wa ...

Wheelnav.js implementing a dynamic bouncing animation

I'm currently in the process of working on a pie menu with wheelnav.js and everything is going smoothly so far. However, I can't seem to find any information in the wheelnav.js documentation on how to eliminate the bouncing effect when a menu cho ...

AJAX request fails to invoke upload.php script

After selecting an image, adding some text, and clicking submit, the progress bar shows that the upload was successful. However, the upload.php file is not being called as expected. Question: What could be causing the issue in my code that is preventing t ...

Updating an if statement in Rails views via AJAX: the ultimate guide

In my app, I have votable posts that users can vote on through AJAX. While this functionality works well, I also want to update the status of a post (indicating whether it is an agreed milestone) when a user votes through AJAX. Below is the code snippet fo ...

Steps to create a continuous blinking/flickering effect on a highchart pathfill

I am currently utilizing highcharts within one of my applications. I want to emphasize a particular stroke based on the content, and while I have achieved this already, I now need it to blink or flicker as if indicating an issue at that specific point. C ...

Obtaining data from a CSV file and transforming it into JSON format results in an array

Currently, I am working on a function that takes a JSON object and prints it out as strings: GetAllArticles: (req, res) => { var allArticles = getAllArticles(); res.setHeader("Content-Type", 'application/json'); res.w ...

Where can I locate a specific child element in this scenario?

Currently, I am exploring the possibilities of integrating AngularJS into my application and have encountered a question regarding the click event implementation. Within my HTML code: <div ng-click='clickMe()' ng-controller='testCtrl&ap ...

AngularJS Vimeo API Request Error: "401 Authorization Required"

I've been experimenting with making external API calls to Vimeo from my AngularJS code using $http.jsonp. However, I keep receiving a 401 Authorization required error even though I have included my authorization key in the header. I encountered a simi ...