Customizing table headers in Yajra Laravel Datatables

I am encountering an issue with category sorting on my list of products. When I click on category sorting, it only shows the same category and product name repeatedly. All other sorting functions are working correctly, except for category sorting. I have tried changing category.name to category_name, but that causes category sorting to stop working altogether. I am at a loss as to why this is happening and how to resolve it.
Is there a way to use an Alias for the category name? And which file do I need to modify in order to make these changes?

    var table = $('#product-table').DataTable({
                processing: true,
                serverSide: true,
                bStateSave: true,
                ordering: true,
                dom: 'Bfrtip',
                buttons:[],
                ajax: '{{ URL::to('/admin/products.data') }}',
                order: [[1, 'asc']],
                columnDefs: [
                    { orderable: false, targets: 0 }
                ],
                columns: [
                    {data: 'edit', name: '', searchable:false},
                    {data: 'name', name: 'name'},
                    {data: 'product_code', name: 'product_code'},
                    {data: 'category_name', name: 'category.name'},
                    {data: 'impa_code', name: 'impa_code'},
                    {data: 'issa_code', name: 'issa_code'},
                    {data: 'status', name: 'is_active'}
                ],
                "deferRender": true
            });


**This is my blade file**


`<div class="row clearfix">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 m-t-50">
        <div class="card">
            <div class="body">
                <table class="table table-striped table-hover dataTable" id="product-table">
                    <thead>
                    <tr>
                        <th class="col-sm-1"></th>
                        <th>{{ Lang::get('views.name') }}</th>
                        <th>{{ Lang::get('views.shipskart_code') }}</th>
                        <th>{{ Lang::get('views.category_name') }}</th>
                        <th>{{ Lang::get('views.impa_code') }}</th>
                        <th>{{ Lang::get('views.issa_code') }}</th>
                        <th>{{ Lang::get('views.status') }}</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>`




This is Controller



` ->editColumn('product_code', function ($product) {
                $productCode = $product['product_code'];
                return $productCode;
            })
            ->addColumn('category_name', function ($product) {
                return empty($product->category) ? 'N/A' : $product->category->name ;
            })
            ->editColumn('impa_code', function ($product) {
                $impaCode = $product->impa_code;
                return $impaCode;
            })
            ->editColumn('issa_code', function ($product) {
                $issaCode = $product->issa_code;
                return $issaCode;`

Answer №1

My understanding is that this pertains to the Laravel datatable.

In Case of a Naming Issue

If you wish to modify the header name to something like category.name in the blade view displaying the table, locate the headers and make the necessary adjustments there.

Replace this line:

<th>{{ Lang::get('views.category_name') }}</th>

with:

<th>{{ the new name }}</th>

If you want it to reflect the language code as well, update your language files.

Go to the Views, in the specific language you want to modify, and edit the category_name file.

For instance, if you want to change category_name to CAT title in English language, navigate to /resources/lang/en or wherever your lang/en folder is located and adjust the line.

'category_name' => 'CAT title'

If It's a Data Issue

If the data isn't reflecting what you expect, always examine the link causing the problem, such as

/admin/products.data

Here, you can determine exactly what data is being received so you can display it correctly in your table. Consult the DataTable Manual for guidance.

For example, if you're getting a product array with a key named name, in JavaScript it would be referred to as product.name as per how JSON is interpreted.

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

Is it possible to submit a form through a JavaScript hotkey?

Here's the current code that I'm working with: <select tabindex="2" id="resolvedformsel" name="resolved"> <option selected="selected" value="yes">resolved</option> <option value="no">not resolved</option> ...

The concept of global object/scope and circular references in undefined cases

Trying to make sense of the outcomes from these few experiments : Experiment number 1 (in a new command line) : > _ ReferenceError: _ is not defined at repl:1:2 at REPLServer.self.eval (repl.js:110:21) at Interface.<anonymous> (repl. ...

Tips for connecting elements at the same index

.buttons, .weChangeColor { width: 50%; height: 100%; float: left; } .weChangeColor p { background: red; border: 1px solid; } .toggleColor { background: green; } <div class="buttons"> <p><a href="#">FirstLink</a></ ...

Responding with a JSON payload in a Laravel application triggers the error "Property of Null cannot be read"

After sending an email and receiving a response in my mobile application from my PHP file (Laravel). $msg ="email sent "; $erreur=false; return response()->json(['Message' => $msg, 'erreur' => $erreur]); However, when ...

Data vanishing in upcoming authentication session in test environment

I have encountered an issue with next auth in my next.js project. During development, the session data is lost if the server refreshes or if I switch to another tab and return to it. This forces me to sign out and then sign back in to restore the session d ...

Angular: Refresh mat-table with updated data array after applying filter

I have implemented a filter function in my Angular project to display only specific data in a mat-table based on the filter criteria. Within my mat-table, I am providing an array of objects to populate the table. The filtering function I have created loo ...

Unable to retrieve AJAX response

I've been working on a page where I'm using AJAX to fetch data based on the selection of radio buttons. The three options available are 'Unapproved', 'Approved' and 'All'. My goal is to display the corresponding user ...

Clear Input Field upon Selection in JQuery Autocomplete

I've been experimenting with the Azure Maps API to add autosuggestions for addresses in an input field. https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/master/AzureMapsCodeSamples/REST%20Services/Fill%20Address%20Form%20with%20Autosuggest. ...

The perfect way to override jest mocks that are specified in the "__mocks__" directory

Within the module fetchStuff, I have a mock function named registerAccount that is responsible for fetching data from an API. To test this mock function, I've created a mock file called __mocks__/fetchStuff.ts. Everything seems to be functioning corre ...

Is there a way to dynamically alter the theme based on stored data within the store

Is it possible to dynamically change the colors of MuiThemeProvider using data from a Redux store? The issue I'm facing is that this data is asynchronously loaded after the render in App.js, making the color prop unreachable by the theme provider. How ...

Error: Attempting to access the 'client' property of an undefined object

I'm currently working on a basic discord.js bot. Below is the code snippet that generates an embed: const Discord = require('discord.js') require('dotenv/config') const bot = new Discord.Client(); const token = process.env.TOKEN ...

Steps for adding a border to kendo grid row hover

One of my tasks involved creating a grid using Kendo, and I wanted to display borders on a grid row when the cursor hovers over it. I attempted the following code snippet: .k-grid > table > tbody > tr:hover, .k-grid-content > table > tbody ...

Invoking numerous functions through the (click)= event

When it comes to removing a user from my site, I find myself having to execute multiple database queries to delete the user's ID across approximately 10 different tables. Currently, I am resorting to what I consider a messy workaround where I have mu ...

The responsive menu refuses to appear

my code is located below Link to my CodePen project I'm specifically focusing on the mobile view of the website. Please resize your screen until you see the layout that I'm referring to. I suspect there might be an issue with my JavaScript cod ...

The property 'dateClick' is not found in the 'CalendarOptions' type in version 6 of fullcalendar

Below is the Angular code snippet I am currently using: calendarOptions: CalendarOptions = { plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ], initialView: 'dayGridMonth', headerToolbar: { left: 'prev today next' ...

Adjust the log level on winston in real-time

Is there a way to update the log level dynamically in winston and have it reflect across multiple files? I am facing an issue where changing the logger level in index.js does not affect readfile.js. How can I resolve this? Below is the code snippet: win ...

What is the best way to remove table cells from a TableBody?

Currently, I am in the process of designing a table to display data retrieved from my backend server. To accomplish this, I have opted to utilize the Table component provided by Material UI. The data I retrieve may either be empty or contain an object. My ...

Twilio's phone calls are programmed to end after just 2 minutes

For the past week, I've been dealing with a frustrating issue where calls are being automatically disconnected after 2 minutes of recording. Here is the TwiML code: <Response> <Say voice="woman" language="en">Hii Welcome to our App</Sa ...

Incorporating video.js into an Angular website application

I've encountered a strange issue while attempting to integrate video.js into my angular app. <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="300" height="264" poster="http://video-js.zenco ...

Using Angular.JS to iterate over a nested JSON array using ng-repeat

I am currently working on a People service that utilizes $resource. I make a call to this service from a PeopleCtrl using People.query() in order to retrieve a list of users from a json api. The returned data looks like this: [ { "usr_id" : "1" ...