applerinquest.com
Open in
urlscan Pro
104.37.185.188
Public Scan
URL:
https://applerinquest.com/how-to-filter-data-in-datatable-using-ajax-in-codeigniter/
Submission: On February 16 via api from JP — Scanned from JP
Submission: On February 16 via api from JP — Scanned from JP
Form analysis 3 forms found in the DOM
<form autocomplete="off" aria-label="Ajax search form">
<input aria-label="Search input" type="search" class="orig" name="phrase" placeholder="Search posts here" value="" autocomplete="off">
<input aria-label="Autocomplete input, do not use this" type="text" class="autocomplete" name="phrase" value="" autocomplete="off">
<input type="submit" value="Start search" style="width:0; height: 0; visibility: hidden;">
</form>GET https://applerinquest.com
<form action="https://applerinquest.com" method="get"><label class="screen-reader-text" for="cat">Categories</label><select name="cat" id="cat" class="postform">
<option value="-1">Select Category</option>
<option class="level-0" value="240">CodeIgniter (17)</option>
<option class="level-0" value="225">Computer (1)</option>
<option class="level-0" value="162">cPanel (1)</option>
<option class="level-0" value="111">Debug (2)</option>
<option class="level-0" value="184">Domain (4)</option>
<option class="level-0" value="214">Email (1)</option>
<option class="level-0" value="185">Hosting (1)</option>
<option class="level-0" value="108">Javascript (2)</option>
<option class="level-0" value="103">jQuery (5)</option>
<option class="level-0" value="98">Life in Chiang Mai (11)</option>
<option class="level-0" value="208">NPM (1)</option>
<option class="level-0" value="124">Performance (1)</option>
<option class="level-0" value="317">Project Management (1)</option>
<option class="level-0" value="82">VSCode (2)</option>
<option class="level-0" value="92">Web Designer (4)</option>
<option class="level-0" value="115">Web development (56)</option>
<option class="level-0" value="100">WordPress (80)</option>
<option class="level-0" value="73">Yii2.0 framework (19)</option>
</select></form>Name: options —
<form name="options" autocomplete="off">
<div class="asl_option_inner hiddend">
<input type="hidden" name="qtranslate_lang" id="qtranslate_lang1" value="0">
</div>
<fieldset class="asl_sett_scroll">
<legend style="display: none;">Generic selectors</legend>
<div class="asl_option asl-o-last">
<div class="asl_option_inner">
<input type="checkbox" value="exact" id="set_exactonly1" title="Exact matches only" name="asl_gen[]">
<label for="set_exactonly1">Exact matches only</label>
</div>
<div class="asl_option_label"> Exact matches only</div>
</div>
<div class="asl_option hiddend">
<div class="asl_option_inner">
<input type="checkbox" value="title" id="set_intitle1" title="Search in title" name="asl_gen[]" checked="checked">
<label for="set_intitle1">Search in title</label>
</div>
<div class="asl_option_label"> Search in title</div>
</div>
<div class="asl_option hiddend">
<div class="asl_option_inner">
<input type="checkbox" value="content" id="set_incontent1" title="Search in content" name="asl_gen[]" checked="checked">
<label for="set_incontent1">Search in content</label>
</div>
<div class="asl_option_label"> Search in content</div>
</div>
<div class="asl_option_inner hiddend">
<input type="checkbox" value="excerpt" id="set_inexcerpt1" title="Search in excerpt" name="asl_gen[]" checked="checked">
<label for="set_inexcerpt1">Search in excerpt</label>
</div>
</fieldset>
<fieldset class="asl_sett_scroll">
<div class="asl_option_inner hiddend">
<input type="checkbox" value="post" id="1customset_11" title="Hidden option, ignore please" name="customset[]" checked="checked">
<label for="1customset_11">Hidden</label>
</div>
<div class="asl_option_label hiddend"></div>
</fieldset>
<fieldset>
<legend>Filter by Categories</legend>
<div class="categoryfilter asl_sett_scroll">
<div class="asl_option">
<div class="asl_option_inner">
<input type="checkbox" value="240" id="1categoryset_240" title="CodeIgniter" name="categoryset[]" checked="checked">
<label for="1categoryset_240">CodeIgniter</label>
</div>
<div class="asl_option_label"> CodeIgniter</div>
</div>
<div class="asl_option">
<div class="asl_option_inner">
<input type="checkbox" value="225" id="1categoryset_225" title="Computer" name="categoryset[]" checked="checked">
<label for="1categoryset_225">Computer</label>
</div>
<div class="asl_option_label"> Computer</div>
</div>
<div class="asl_option">
<div class="asl_option_inner">
<input type="checkbox" value="162" id="1categoryset_162" title="cPanel" name="categoryset[]" checked="checked">
<label for="1categoryset_162">cPanel</label>
</div>
<div class="asl_option_label"> cPanel</div>
</div>
<div class="asl_option">
<div class="asl_option_inner">
<input type="checkbox" value="111" id="1categoryset_111" title="Debug" name="categoryset[]" checked="checked">
<label for="1categoryset_111">Debug</label>
</div>
<div class="asl_option_label"> Debug</div>
</div>
<div class="asl_option">
<div class="asl_option_inner">
<input type="checkbox" value="184" id="1categoryset_184" title="Domain" name="categoryset[]" checked="checked">
<label for="1categoryset_184">Domain</label>
</div>
<div class="asl_option_label"> Domain</div>
</div>
<div class="asl_option">
<div class="asl_option_inner">
<input type="checkbox" value="214" id="1categoryset_214" title="Email" name="categoryset[]" checked="checked">
<label for="1categoryset_214">Email</label>
</div>
<div class="asl_option_label"> Email</div>
</div>
<div class="asl_option">
<div class="asl_option_inner">
<input type="checkbox" value="185" id="1categoryset_185" title="Hosting" name="categoryset[]" checked="checked">
<label for="1categoryset_185">Hosting</label>
</div>
<div class="asl_option_label"> Hosting</div>
</div>
<div class="asl_option">
<div class="asl_option_inner">
<input type="checkbox" value="108" id="1categoryset_108" title="Javascript" name="categoryset[]" checked="checked">
<label for="1categoryset_108">Javascript</label>
</div>
<div class="asl_option_label"> Javascript</div>
</div>
<div class="asl_option">
<div class="asl_option_inner">
<input type="checkbox" value="103" id="1categoryset_103" title="jQuery" name="categoryset[]" checked="checked">
<label for="1categoryset_103">jQuery</label>
</div>
<div class="asl_option_label"> jQuery</div>
</div>
<div class="asl_option">
<div class="asl_option_inner">
<input type="checkbox" value="98" id="1categoryset_98" title="Life in Chiang Mai" name="categoryset[]" checked="checked">
<label for="1categoryset_98">Life in Chiang Mai</label>
</div>
<div class="asl_option_label"> Life in Chiang Mai</div>
</div>
<div class="asl_option">
<div class="asl_option_inner">
<input type="checkbox" value="208" id="1categoryset_208" title="NPM" name="categoryset[]" checked="checked">
<label for="1categoryset_208">NPM</label>
</div>
<div class="asl_option_label"> NPM</div>
</div>
<div class="asl_option">
<div class="asl_option_inner">
<input type="checkbox" value="124" id="1categoryset_124" title="Performance" name="categoryset[]" checked="checked">
<label for="1categoryset_124">Performance</label>
</div>
<div class="asl_option_label"> Performance</div>
</div>
<div class="asl_option">
<div class="asl_option_inner">
<input type="checkbox" value="317" id="1categoryset_317" title="Project Management" name="categoryset[]" checked="checked">
<label for="1categoryset_317">Project Management</label>
</div>
<div class="asl_option_label"> Project Management</div>
</div>
<div class="asl_option">
<div class="asl_option_inner">
<input type="checkbox" value="82" id="1categoryset_82" title="VSCode" name="categoryset[]" checked="checked">
<label for="1categoryset_82">VSCode</label>
</div>
<div class="asl_option_label"> VSCode</div>
</div>
<div class="asl_option">
<div class="asl_option_inner">
<input type="checkbox" value="92" id="1categoryset_92" title="Web Designer" name="categoryset[]" checked="checked">
<label for="1categoryset_92">Web Designer</label>
</div>
<div class="asl_option_label"> Web Designer</div>
</div>
<div class="asl_option">
<div class="asl_option_inner">
<input type="checkbox" value="115" id="1categoryset_115" title="Web development" name="categoryset[]" checked="checked">
<label for="1categoryset_115">Web development</label>
</div>
<div class="asl_option_label"> Web development</div>
</div>
<div class="asl_option">
<div class="asl_option_inner">
<input type="checkbox" value="100" id="1categoryset_100" title="WordPress" name="categoryset[]" checked="checked">
<label for="1categoryset_100">WordPress</label>
</div>
<div class="asl_option_label"> WordPress</div>
</div>
<div class="asl_option asl-o-last">
<div class="asl_option_inner">
<input type="checkbox" value="73" id="1categoryset_73" title="Yii framework" name="categoryset[]" checked="checked">
<label for="1categoryset_73">Yii framework</label>
</div>
<div class="asl_option_label"> Yii2.0 framework</div>
</div>
</div>
</fieldset>
</form>Text Content
* Home
* What I Do »
* Web Design
* Web Development
* Freelance Web Developer
* Work
* Resume
* FAQ
* Contact
* Blog »
* All posts
* Tutorial
* WordPress
* Woocommerce
* CodeIgniter
* Yii2.0 framework
* Web development
* Home
* What I Do
* Web Design
* Web Development
* Freelance Web Developer
* Work
* Resume
* FAQ
* Contact
* Blog
* All posts
* Tutorial
* WordPress
* Woocommerce
* CodeIgniter
* Yii2.0 framework
* Web development
20 Jul 2020
Home » BLOG » Web development » How to filter data in DataTable using Ajax in
CodeIgniter
HOW TO FILTER DATA IN DATATABLE USING AJAX IN CODEIGNITER
Last updated on Dec 2, 2020 @ 18:27 by Apple Rinquest - WordPress/PHP Developer
/ category: CodeIgniter, Web development
Contact Me for Work
6 min read
When you create a web application for managing your data such as accounting,
stock, and sale orders. You will need the reports which come with the filters
that allow you to view only the data you need. This post will show you how to
create a filter form and filter the data in Datatable in CodeIgniter. You can
apply this method to other PHP frameworks. It will work the same way.
If you want to learn how to integrate the Datatable plugin in CodeIgniter, you
can read this post below.
* Use DataTable plugin in CodeIgniter
If you want to learn how to add, edit, and delete the data from the Datatable
plugin in CodeIgniter, you can read the following posts.
* Add New data in DataTable plugin
* Edit data in DataTable plugin
* Delete data in DataTable plugin
Contents hide
1 Adding filter form
2 Fetch data filtered by the filter form
2.1 Extra column on my table
3 Create the get_news_by_filters method in the controller
4 Create get_news_by_ajax method in the model
5 Tips for WordPress and Datatable
ADDING FILTER FORM
Let’s say, you already integrated the Datatable plugin on the view page. If you
don’t know how, check this post. Now, you will add the filter form below.
The filter form will filter only the title field from my news table(id, slug,
title, text). You can add more input fields you like to meet your case. Just
need to add the input fields within the form tag.
Below is my filter form in the view page.
HTML code<!-- Filters -->
<div class="container">
<div class="row">
<div class="col-md-12">
<form action="" id="frm_filters" name="frm_filters">
<div class="form-group">
<label for=""><b>Filter</b></label>
<input type="text" name="filter_title" id="filter_title" class="col-md-8" maxlength="128" minlength="1">
<input type="submit" name="frm-filter-btn" id="frm-filter-btn" class="col-md-2 btn-warning" value="Search">
</div>
</form>
</div>
</div>
</div>
<hr>
<!-- data -->
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Add New Data button -->
<button class="btn btn-primary mb-3" data-toggle="modal" data-target="#add_new_modal">Add New Data</button>
<!-- Render data in datatable plugin -->
<table id="rep_news" class="table table-striped table-bordered table-hover" style="width:100%">
<thead>
<tr>
<th>Id</th>
<th>Title</th>
<th>Slug</th>
<th>Text</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th>Id</th>
<th>Title</th>
<th>Slug</th>
<th>Text</th>
<th></th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
FETCH DATA FILTERED BY THE FILTER FORM
On the filter form, when users click on the search button, we will fetch the
data from the news table and render it in the Datatable.
Below is the JS code that I add at the footer of the HTML template. Always add
the JS code or JS file at the footer for the best performance.
However, some JS codes require to add in the head section such as Google
Analytics tag.
JS Code$(document).ready(function() {
$('#frm-filter-btn').on("click", function() {
event.preventDefault();
var table = $('#rep_news');
$.ajax({
url: "<?= base_url('index.php/news/get_news_by_filters') ?>",
dataType: 'JSON',
method: 'POST',
data: {
'filter_news_title': $('#filter_title').val()
},
success: function(data_return) {
console.log(data_return);
// destroy the DataTable
table.dataTable().fnDestroy();
// clear the table body
table.find('tbody').empty();
// reinitiate
table.DataTable({
// # data source as object (JSON object array)
// You must use the exactly format as shown on the link below
// https://datatables.net/manual/data/#Objects
data: data_return,
columns: [{
"data": "id"
},
{
"data": "title"
},
{
"data": "slug"
},
{
"data": "text"
},
{
"data": null
},
],
columnDefs: [{
// # hide the first column
// https://datatables.net/examples/advanced_init/column_render.html
"targets": [0],
// "visible": false
},
{
// # disable search for column number 2
// https://datatables.net/reference/option/columns.searchable
"targets": [3],
"searchable": false,
// # disable orderable column
// https://datatables.net/reference/option/columns.orderable
"orderable": false
},
{
// # action controller (edit,delete)
"targets": [4],
// # column rendering
// https://datatables.net/reference/option/columns.render
"render": function(data, type, row, meta) {
$controlls = '<button class="btn btn-sm btn-info" data-toggle="modal" data-target="#edit_news_modal" data-id="' + row.id + '" data-title="' + row.title + '" data-slug="' + row.slug + '" data-text="' + row.text + '">Edit</button>';
$controlls += '<button class="btn btn-sm btn-danger ml-2" data-toggle="modal" data-target="#delete_news_modal" data-id="' + row.id + '" data-title="' + row.title + '" data-slug="' + row.slug + '" data-text="' + row.text + '">Delete</button>';
return $controlls;
},
"width": 100
}
],
// #set order descending and ascending
// https: //datatables.net/reference/option/order
"order": [
[1, 'desc'],
[2, 'asc']
]
});
}
});
});
}); // document ready ends
When users click on the search button, the JS code above will activate. We are
using Ajax and send the request along with the filter value to
“get_news_by_filters” method in the news controller which we don’t create yet.
We send the request as JSON with the POST method. We use the POST method so the
filter value won’t show on the URI.
We pass the filter value using data option which is a JSON data type.
If Ajax receives the response and no error occurs, Ajax will continue on success
function. This is an Ajax basic. If you are a web developer, I don’t think you
will have any issues using Ajax but if you do, please learn the basics from here
before continuing further.
Within the success function, you will destroy the Datatable object first, if you
initial it with the rep_news table before. Then you will remove the tbody tag to
make sure no extra unused tags left. Then you reinitiate the Datatable object
with the rep_news table again.
For the minimum options that Datatable needs to work, Only two Datatable options
are requested which are data and columns.
The data option, in this case, I use the object as a data source for Datatable.
The Format looks like below. It is a JSON object array.
Object as a data source for DataTable[
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
}
]
The columns option tells Datatable how many columns from the data source will
match the columns in the table. We will use the object key from the data source
and assign it to the data key of the columns object.
Note that, the member of columns array must be the same number of <th> tag in
our table in the HTML template.
EXTRA COLUMN ON MY TABLE
In my JS code above, the last column will render the Edit and Delete buttons
which don’t come from the field in the database but I need the last column for
those buttons in my table. So I assign the null value to the last data key for
my purpose.
Then I will write the callback function to render those buttons on the last
column in the table by using columnDefs options. In my JS code above, you will
see targets[4] which refers to the last column on the table. You will see I
write the callback function to render the buttons I need.
The columnDefs and order options are optional. I leave the doc links in the JS
code above. So you can read and use them if you want.
CREATE THE GET_NEWS_BY_FILTERS METHOD IN THE CONTROLLER
As I mention above in JS code, we need to create the get_news_by_filters method
in our controller. In my case, I will create in news controller.
This method will call the model method in order to fetch the data we need. The
code is below.
Code in News Controller /**
* get_news_by_filters
*/
public function get_news_by_filters()
{
$news = $this->news_model->get_news_by_ajax();
// var_dump($news);
// exit;
// # Return our data back to ajax with Json format (json_encode)
// you must use "echo" for returning the result you want back to Ajax call
echo json_encode($news);
}
Make sure you use echo instead of return. And use json_encode() for the query
result array which will get from the get_news_by_ajax method. Again, we don’t
build get_news_by_ajax method yet.
CREATE GET_NEWS_BY_AJAX METHOD IN THE MODEL
In my news model, I fetch the data from my news table as below.
Code in Model public function get_news_by_ajax()
{
// https://codeigniter.com/userguide3/database/query_builder.html#looking-for-similar-data
$this->db->like('title', $this->input->post('filter_news_title'));
$query = $this->db->get('news');
// check the number of rows in the result set
if ($query->num_rows() > 0) {
// return the query result as array
return $query->result_array();
} else {
// return the empty array if no row
return array();
}
}
Make sure, you return the result data as $query->result_array().
For the query, you can change to any query you like.
Below is the result when users filter the data as “News#”.
And that’s it for today. Hope it is useful.
TIPS FOR WORDPRESS AND DATATABLE
If you want to know how to filter the data in Datatable in WordPress, please
check it out here.
APPLE RINQUEST - WORDPRESS/PHP DEVELOPER
Experienced Thai web designer and developer living in Chiang Mai, Thailand.
Seven years of experience in all aspects of WordPress website creation,
including design, plugins, and implementation. Ready to assist your business
growth.
Email: AppleRinquest@gmail.com
Contact Me for Work
codeigniter3, datatable, filters
Previous Post
Next Post
SIMILAR POSTS
Previous
HOW TO IMPORT LARGE DATABASES INTO MYSQL
December 25, 2021
Recently, I work on a woo-commerce site that stores a large database. Since I
need...
HOW TO FETCH API DATA AND IMPORT DATA INTO EXCEL OR CSV WITHOUT CODING
December 12, 2021
Previously, I published the “How to fetch API data using cURL and import data
into...
HOW TO FETCH API DATA USING CURL AND IMPORT DATA INTO EXCEL
December 11, 2021
A couple of weeks ago, one of my friends asked me to help with his...
HOW TO ACCESS THE WAMP WEBSITE(LOCALHOST) FROM ANOTHER COMPUTER, TABLET AND
MOBILE
February 2, 2022
Today I have a situation that I need to test my developing website on all...
HOW TO IGNORE PREVIOUSLY COMMITTED FILES AND FOLDERS
January 26, 2022
Situation I have with CraftCMS3 Recently I am working on a project using
CraftCMS 3....
MYSQL TIMEZONE SUPPORT WARNING IN CRAFT CMS
January 20, 2022
Craft CMS is a CMS (Content Manage System) built on Yii2, and Twig. It is...
HOW TO UNDO THE COMMIT IN GIT
January 19, 2022
Today I have a situation where I fetch the changes from the master branch(remote
repo)...
HOW TO INSTALL SSL CERTIFICATE (HTTPS) ON LOCALHOST
January 15, 2022
Recently, I am working on a project that requests to use HTTPS in order to...
HOW TO IMPORT LARGE DATABASES INTO MYSQL
December 25, 2021
Recently, I work on a woo-commerce site that stores a large database. Since I
need...
HOW TO FETCH API DATA AND IMPORT DATA INTO EXCEL OR CSV WITHOUT CODING
December 12, 2021
Previously, I published the “How to fetch API data using cURL and import data
into...
HOW TO FETCH API DATA USING CURL AND IMPORT DATA INTO EXCEL
December 11, 2021
A couple of weeks ago, one of my friends asked me to help with his...
HOW TO ACCESS THE WAMP WEBSITE(LOCALHOST) FROM ANOTHER COMPUTER, TABLET AND
MOBILE
February 2, 2022
Today I have a situation that I need to test my developing website on all...
HOW TO IGNORE PREVIOUSLY COMMITTED FILES AND FOLDERS
January 26, 2022
Situation I have with CraftCMS3 Recently I am working on a project using
CraftCMS 3....
MYSQL TIMEZONE SUPPORT WARNING IN CRAFT CMS
January 20, 2022
Craft CMS is a CMS (Content Manage System) built on Yii2, and Twig. It is...
HOW TO UNDO THE COMMIT IN GIT
January 19, 2022
Today I have a situation where I fetch the changes from the master branch(remote
repo)...
HOW TO INSTALL SSL CERTIFICATE (HTTPS) ON LOCALHOST
January 15, 2022
Recently, I am working on a project that requests to use HTTPS in order to...
HOW TO IMPORT LARGE DATABASES INTO MYSQL
December 25, 2021
Recently, I work on a woo-commerce site that stores a large database. Since I
need...
HOW TO FETCH API DATA AND IMPORT DATA INTO EXCEL OR CSV WITHOUT CODING
December 12, 2021
Previously, I published the “How to fetch API data using cURL and import data
into...
HOW TO FETCH API DATA USING CURL AND IMPORT DATA INTO EXCEL
December 11, 2021
A couple of weeks ago, one of my friends asked me to help with his...
Next
LET’S WORK TOGETHER
Has a new project, issues fixing, or adding new functionalities. Let's discuss
CATEGORIES
CategoriesSelect
CategoryCodeIgniter (17)Computer (1)cPanel (1)Debug (2)Domain (4)Email (1)Hosting (1)Javascript (2)jQuery (5)Life
in Chiang Mai (11)NPM (1)Performance (1)Project Management (1)VSCode (2)Web
Designer (4)Web development (56)WordPress (80)Yii2.0 framework (19)
Fast WordPress theme in 2021
Create the creative and beautiful website with Elementor Pro
VISIT SMART SLIDER 3
VISIT A SOCIAL LOGIN PLUGIN
Another lightweight WordPress theme
RECENT POSTS
* How to access the Wamp website(localhost) from another computer, tablet and
mobile
* How to ignore previously committed files and folders
* MySQL timezone support warning in Craft CMS
ELEMENTOR PLUGIN
The best page builder plugin for WordPress and Woocommerce – Elementor plugin
Video Player
https://elementor.com/wp-content/uploads/2021/06/02_MainVideo_1066_600_HR201.mp4
00:00
00:00
00:22
Use Up/Down Arrow keys to increase or decrease volume.
EMAIL ME
AppleRinquest@gmail.com
LINKEDIN
Connect with My LinkedIn
ADDRESS
San Kamphaeng, Chiang Mai, Thailand
* Email me
* LinkedIn
©2022 Apple Rinquest | WordPress & PHP Developer
Generic selectors
Exact matches only
Exact matches only
Search in title
Search in title
Search in content
Search in content
Search in excerpt
Hidden
Filter by Categories
CodeIgniter
CodeIgniter
Computer
Computer
cPanel
cPanel
Debug
Debug
Domain
Domain
Email
Email
Hosting
Hosting
Javascript
Javascript
jQuery
jQuery
Life in Chiang Mai
Life in Chiang Mai
NPM
NPM
Performance
Performance
Project Management
Project Management
VSCode
VSCode
Web Designer
Web Designer
Web development
Web development
WordPress
WordPress
Yii framework
Yii2.0 framework