-
firas
Junior Member
-
Posts: 13
Threads: 4
Joined: Jan 2019
Reputation:
0
I want to make a date filter only by year for my event page so people can filter by year so they can see what events are happening by year, but many people are using between date filter which is hard for me to understand, is there anyone can help me build a datepicker filter by year 
this is my controller :
Code: <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Exhibitions extends CI_Controller {
function __construct() {
parent::__construct();
$this->load->helper('general_helper');
$this->load->helper('date');
//load pagination library
$this->load->library('pagination');
//load post model
$this->load->model('exhibitions_model');
//per page limit
$this->perPage = 10;
}
public function index(){
$data = array();
//get rows count
$conditions['returnType'] = 'count';
$totalRec = $this->exhibitions_model->getRows($conditions);
//pagination config
$config['base_url'] = 'http://localhost/demo1/index.php/exhibitions/index';
$config['uri_segment'] = 3;
$config['total_rows'] = $totalRec;
$config['per_page'] = $this->perPage;
//styling
$config['num_tag_open'] = '<li class="page-item">';
$config['num_tag_close'] = '</li>';
$config['cur_tag_open'] = '<li class="page-item active"><a class="page-link" href="javascript:void(0);">';
$config['cur_tag_close'] = '</a></li>';
$config['next_link'] = 'Next';
$config['prev_link'] = 'Prev';
$config['next_tag_open'] = '<li class="page-item">';
$config['next_tag_close'] = '</li>';
$config['prev_tag_open'] = '<li class="pg-prev">';
$config['prev_tag_close'] = '</li>';
$config['first_tag_open'] = '<li>';
$config['first_tag_close'] = '</li>';
$config['last_tag_open'] = '<li>';
$config['last_tag_close'] = '</li>';
//initialize pagination library
$this->pagination->initialize($config);
//define offset
$page = $this->uri->segment(3);
$offset = !$page?0:$page;
//get rows
$conditions['returnType'] = '';
$conditions['start'] = $offset;
$conditions['limit'] = $this->perPage;
$data['omg_event'] = $this->exhibitions_model->getRows($conditions);
//load the list page view
$this->load->view('templates/header', $data);
$this->load->view('pages/exhibitions', $data);
$this->load->view('templates/footer');
}
}
this is my model :
Code: <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Exhibitions_model extends CI_Model{
/*
* Get posts
*/
function getRows($params = array()){
$this->db->select('*');
$this->db->from('omg_event');
$this->db->order_by("date_start", "desc");
if(array_key_exists("event_id",$params)){
$this->db->where('event_id',$params['event_id']);
$query = $this->db->get();
$result = $query->row_array();
}else{
//set start and limit
if(array_key_exists("start",$params) && array_key_exists("limit",$params)){
$this->db->limit($params['limit'],$params['start']);
}elseif(!array_key_exists("start",$params) && array_key_exists("limit",$params)){
$this->db->limit($params['limit']);
}
if(array_key_exists("returnType",$params) && $params['returnType'] == 'count'){
$result = $this->db->count_all_results();
}else{
$query = $this->db->get();
$result = ($query->num_rows() > 0)?$query->result_array():FALSE;
}
}
//return fetched data
return $result;
}
}
?>
this is my view :
Code: <head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>
<!--===============================
= Hero Area =
================================-->
<section class="hero-area bg-1 text-center overly">
<!-- Container Start -->
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Header Contetnt -->
<div class="content-block">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="<?php echo base_url() ?>img/ads/ad1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<br><br><br><br><br><br>
<h2>Welcome to Industrial Guide Asia</h2>
<p>As the annual industrial directory, we provides you up-to-date information from the manufacturing, engineering and trading companies classifying advertisements and listing Products & Services, Brand Titles and Trade Shows. Click the button bellow to see around the website !</p>
</div>
</div>
<div class="carousel-item">
<img src="<?php echo base_url() ?>img/ads/ad2.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<br><br><br><br><br><br>
<h2>Our Website Is upgrading</h2>
<p>Please bare with us if you encounter some problems when you are visiting our websites. We are fixing our website to give you a good website that will be more corporate and user friendly. </p>
</div>
</div>
<div class="carousel-item">
<img src="<?php echo base_url() ?>img/ads/ad3.gif" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<br><br><br><br><br><br>
<h2>Don't miss every Event this Year</h2>
<p>Visit the Event page to check what Event that will be held this Year</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Container End -->
</section>
<!--==========================
Services Section
============================-->
<section class="blog single-blog section">
<section id="services">
<div class="container">
<div class="section-title">
<h2>EXHIBITIONS ROADSHOWS & SEMINAR</h2>
<p></p>
</div>
<table class="table table-hover">
<div class="category-search-filter">
<div class="row">
<div class="col-md-3">
Filter
<div class="widget search p-0">
<div class="input-group">
<input type="text" name="order_end_date" value="" class="date-own form-control" id="order-end-date" placeholder="Search">
<button name="filter_order_filter" type="button" class="btn" id="filter-order-filter" value="filter"><i class="fa fa-search fa-fw"></i></button>
</div>
</div>
<script type="text/javascript">
$('.date-own').datepicker({
minViewMode: 2,
format: 'yyyy'
});
</script>
</div>
</div>
</div>
<?php if(!empty($omg_event)): foreach($omg_event as $post): ?>
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> <?php if(!empty($post['thumb_img'])){ ?>
<img src="<?php echo base_url().image('upload/'.$post['thumb_img'],120,53); ?>" alt="">
<?php } ?></th>
<td width="15%"><?php echo dateFormat($post['date_start'], 'd/m/Y').' - '.dateFormat($post['date_end'], 'd/m/Y');?></td>
<td><?php echo $post['name'];?></td>
<td><?php echo $post['address'];?></td>
<td width="15%""><a href="">Send Enquiry</a></td>
</tr>
<?php endforeach; else: ?>
<tr><td colspan="3">Post(s) not found......</td></tr>
<?php endif; ?>
</tbody>
</table>
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination">
<?php echo $this->pagination->create_links(); ?>
</ul>
</nav>
</div>
</div>
</section><!-- #services -->
</section>
-
php_rocs
Administrator
-
Posts: 1,419
Threads: 107
Joined: Jun 2016
Reputation:
73
-
firas
Junior Member
-
Posts: 13
Threads: 4
Joined: Jan 2019
Reputation:
0
(02-24-2019, 07:58 PM)php_rocs Wrote: @firas,
If the DataTables plugin disappears then something is configured wrong. What was the error messages?
there was no error message, it just shows all data from the database without the DataTables plugin, I tried using another method using jquery search filter like this one :
Code: <script>
function myFunction2() {
var input, filter, table, tr, td, i, th;
input = document.getElementById("search");
filter = input.value.toUpperCase();
table = document.getElementById("myTable1");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
but it only searches on the first page without searching on the page of my pagination, like if my data that was on 2015 on page 5, and when I search 2015, it only search on the first page.
|
