Obtaining data based on date using Laravel and Ajax

I need to retrieve data from two tables in the database, registrations and ssi_tracks. The goal is to display data from the registrations table based on the track_first_status field. I also require filtering of the data by date range and presenting it in a datatable.

Below is a sample of the controller file with a custom function:

public function datewise(Request $request, $data_end, $data_start){


      $data_start->$request->input('start_date');
      $data_end->$request->input('end_date');


     $datewise=DB::table('registrations')
          ->join('ssi_tracks', 'registrations.registration_id', '=', 'ssi_tracks.registration_id')
          ->select('address', 'model', 'chassis', 'delivery_date')
          ->where([["ssi_tracks.track_first_status", "=", 0]])
          ->whereBetween('created_at',[$data_start, $data_end])
          ->get();

      $output = "";
      $count = 1;
      foreach ($datewise as  $reg) {

          $output .= '<tr>' .
              '<td>' . $count++ . '</td>' .
              '<td>' . $reg->address . '</td>' .
              '<td>' . $reg->model . '</td>' .
              '<td>' . $reg->chassis . '</td>' .
              '<td>' . $reg->delivery_date . '</td>' .
              '<td>' . '<button class="btn btn-primary btn-rounded button">Call Customer
                                                    </button>'. '</td>' .

              '</tr>';


      }
      return response()->json($output);
}

Here is an example of the Ajax Function:

<script>

        $(function () {
            $("#start_date").datepicker();
            $("#end_date").datepicker();
        });
        $('#filter').click(function () {
            let start_date = $('#start_date').val();
            let end_date = $('#end_date').val();
            if (start_date !== '' && end_date !== '') {
                $.ajax({
                    url: "{{url("date")}}",
                    method: "get",
                    data: {
                        start_date: start_date,
                        end_date: end_date
                    },
                    success: function (data) {
//                        $('#listdetails').html(data);
                        console.log(data);
                    }
                });
            } else {
                alert("Please Select Date");
            }
        });
    });


</script>

The index File includes input fields for selecting dates:

 <label>From
                                </label> <input type="date" name="start_date" id="start_date" class="form-control"
                                                style="width:150px;">
                                <label>To</label> <input type="date" name="end_date" id="end_date" class="form-control"
                                                         style="width:150px;">
                                <button class="btn btn-info" id="filter" name="filter" >Filter</button>

Answer №1

This piece of code demonstrates how to retrieve data based on a date range,

public function datewise(Request $request){

      $data_start = $request->input('start_date');
      $data_end = $request->input('end_date');


     $datewise=DB::table('registrations')
          ->join('ssi_tracks', 'registrations.registration_id', '=', 'ssi_tracks.registration_id')
          ->select('address', 'model', 'chassis', 'delivery_date')
          ->where([["ssi_tracks.track_first_status", "=", 0]])
          ->whereBetween('created_at',[$data_start, $data_end])
          ->get();

      $output = "";
      $count = 1;
      foreach ($datewise as  $reg) {

          $output .= '<tr>' .
              '<td>' . $count++ . '</td>' .
              '<td>' . $reg->address . '</td>' .
              '<td>' . $reg->model . '</td>' .
              '<td>' . $reg->chassis . '</td>' .
              '<td>' . $reg->delivery_date . '</td>' .
              '<td>' . '<button class="btn btn-primary btn-rounded button">Call Customer
                                                    </button>'. '</td>' .

              '</tr>';


      }
      return response()->json($output);
}

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

Issue Occurred when Trying to Import External Class in Vue Component

I am having trouble importing an external JavaScript file that contains a Form Class into a Vue Component. My File Structure is as follows: js - components -- dashboard --- dashboard.vue - app.js - form.js I have attempted to import the Form Class using ...

An overview on adding a new element to an array of objects in AngularJS

I have a feature on my website where users can create via points. Each user starts with one point, and if they want to add more, they can click "add" to insert a new object in the array with an empty value. The user then has the option to input a new value ...

Challenges encountered with the login page within the script document

I am struggling to make this simple code work. Here is the code snippet I am working with that needs to list two user names along with their selected passwords. While I understand hardcoding in the script is not ideal, it is required for this assignment. ...

What is the best way to incorporate dynamic data into dynamic HTML in Angular 1?

I am trying to achieve a scenario similar to this: https://i.sstatic.net/LLTcK.png After researching, I found out about $compile, $trustAsHtml, and finally directives. However, in $compile and $trustAsHtml, I can only append static templates or plain HTM ...

"Implementing legends in charts with c3.js and JSON data: A step-by-step guide

Utilizing the C3 chart library to showcase data in my project, I aim to display legends (labels) instead of numbers on the AxisX: Data JSON format: [ {"Label":"DQUA","Aut":3.75,"NoAut":3.75,"CM":32}, {"Label":"DPRO","Aut":43.9,"NoAut":0,"CM":144} ...

Dividing a model using three.js

Imagine you have a basic raycaster set up. When you hover over it, the model illuminates. In this scenario, the model is broken down into separate parts, each its own "model" within the larger whole. For instance, think of a car model - when you hover ove ...

What are some techniques for streamlining and simplifying complex and repetitive JS/jQuery code?

I've come across this code snippet in a JavaScript file that I need to modify, but it's quite confusing to me. I'm not sure why it has been written this way and I would appreciate some help in understanding its purpose. Can someone break it ...

Exploring the realms of Django Administrator with external JavaScript integration

Currently, I am working with django 2.0 that includes jquery 2.2.3. My goal is to implement the ImageViewer Javascript app (https://github.com/s-yadav/ImageViewer) on one of my admin pages. I have added the necessary js and css files to the Media class wit ...

I need help figuring out how to retrieve the full path of an uploaded file in JavaScript. Currently, it only returns "c:fakepath" but I need

Is there a way to obtain the complete file path of an uploaded file in javascript? Currently, it only shows c:\fakepath. The file path is being directly sent to the controller through jquery, and I need the full path for my servlet. Are there any alte ...

Is there a way to select multiple elements with the same class using getElementByClassName instead of only obtaining the first element with that class designation?

I recently started learning JavaScript, and I'm still struggling to grasp many concepts. I'm currently working on styling buttons on my website to match the existing ones, but I'm unable to edit the plugin's HTML directly. I was able to ...

Delay the page briefly before redirecting

I want to implement a feature on my WordPress website where after successfully submitting a form, the visitor is shown a message like 'form submitted successfully' for a few seconds before being redirected back to the page they were on. The redir ...

VueJS / v-html is displaying a blank page (Bokeh-html)

Especially as a newcomer to VueJS, I am currently in the process of trying to showcase a local HTML file within the Vue Application. The method I'm using to fetch the HTML file involves Axios, here's how it goes: <template> <div> ...

Implementing Vue components dynamically within a v-for loop based on specific conditions

My JS array is structured like this: [{type:'text', data: 'some text'},{type: 'image', data: 'link/to/image'}] Each value of type corresponds to a different Vue component (<text-block>, <image-block>). ...

Having trouble with making the jQuery animate toggle function properly executed

I am trying to create a panel that is positioned behind the header of my website, with a tab that sticks out below the header. When this tab is clicked, I want the panel to slide down from behind the header, and when clicked again, I want it to slide back ...

What are the steps to enable a Vue component to handle its own transitions?

I am looking for a way to handle enter and leave animations in Vue when components are mounted or removed. My goal is to consolidate all the animation code into its own component for better organization. <template> <transition @enter="enter" ...

What is the reason behind the return value of -1 when using .indexOf()?

function mutation(arr) { var total = arr.map(function(x){return x.toLowerCase();}); var sec = total[1]; for(var i=0; i < sec.length; i++){ // console.log(sec[i]); console.log(total.indexOf(sec[i ...

The angular.json file contains a script and a styles property

After encountering issues with adding styles and scripts to my angular.json file, I discovered that neither Bootstrap nor other scripts were taking effect. It turns out there are two places where you can define scripts and styles in the angular.json file a ...

ends up being \' and \"

So I've created a field where you can type in text. Once you press "ok", an ajax call is sent to save.php which then inserts the input into the database using PHP. The output from the database is displayed, and on successful completion of the ajax cal ...

Divide the Array into Vertical Arrays

Here is my current result: [ '1', '1', '0', '0' ], [ '2', '4', '0', '0' ], [ '3', '7', '0', '0' ], [ '4', '0&apo ...

Utilizing a setTimeout function within a nested function in JavaScript

Recently delving into the world of JavaScript, I encountered an issue with a code snippet that goes like this: function job1() { var subText1 = ""; var subText2 = ""; var text = ""; var vocabulary = "ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijkl ...