How to display a "data not available" notification in AngularJS ngTable plugin tables when the data response array is void of content

I need to implement a no data message in my ngTable table when the response data array is empty.

Currently, I have the following code:

        <tr ng-repeat="row in $data">
            <td data-title="'name'" filter="{name: 'text'}" sortable="'name'">{{row.name}}</td>
            <td data-title="'lastName'" filter="{lastName: 'text'}" sortable="'lastName'">{{row.lastName}}</td>
        </tr>
        <tr>
            <td ng-show="$data.length == 0">
                There's no data
            </td>
        </tr>

However, this message is currently displayed only in the first column. I would like it to span all columns in the center of the first row or at the beginning of the first column without being limited by column boundaries.

For instance, similar to the bootstrap zebra stripes table where the color spans the entire rows, I want the message to occupy full row width. Is there an option in the ngTble plugin that allows for this, like the "no data available" message in jQuery data-tables plugin when the table is empty?

Answer №1

Consistency is key, so make sure to utilize colspan.

<td colspan="2" ng-show="$data.length == 0"> 
    No data available at the moment.
</td>

Answer №2

To fix this issue, simply delete the <td></td> from the table.

<td ng-show="$data.length == 0">
                There is no data
</td>

Instead, replace it with...

<div ng-if="$data.length == 0">Oops, no record found!</div>

and add a condition to your table...

<table ng-if="$data.length > 0"></table>

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

Navigating URLs to Single Page Application Routing in Vue.js

I'm new to using vue-router and I'm curious if there's a way to manage redirection in Vue or if there are alternative methods in a node.js environment. For instance, when someone tries to access my site by typing the URL example.com/contac ...

When utilizing json.loads in Python 2.7, it yields a unicode object rather than a dictionary

I'm currently facing a challenge with converting JSON data into a dictionary, and I'm struggling to find a solution. My situation involves connecting to a Tornado websocket from JavaScript and sending the following data inputted into a textfield ...

Issue with CSS Media Queries: Preventing an Element From Being Affected

As a complete beginner in HTML and CSS, I have a question that may seem silly. Recently, I created this HTML code: * { margin: 0px; padding: 0; box-sizing: border-box; } p { font-size: 14px; font-family: 'Work Sans', 'sans seri ...

iterating over a list of files using JavaScript

I am currently working on setting up individual ajax requests for each file being uploaded. I have a functioning ajax call that creates a record, returns some html, and provides the tempID of the record which is then used in another ajax call that triggers ...

Make sure to include all enum type values within the function's body to ensure comprehensive coverage

I am defining an enumeration called ApiFunctions with values like "HIDE", "SET_READ_ONLY", and "DESCRIPTION". Also, I have a type ValueOfApiFunction that should include all values of ApiFunctions. Additionally, I have a logic that listens for messages on ...

modifying the child divs contained in the main div

Hey there! I'm currently using Bootstrap to design an application and I've got the entire form inside a container. However, as I add more child elements within the container div, I would like the parent div to expand automatically to show all the ...

Pass data to child component in react

I have a parameterized component that can take a value of true or false, and I'm using console.log to verify it. console.log(isContract); //can be true or false Now, I need to pass this value through a form to render another component. This is the p ...

Move a Div to be positioned directly underneath another DIV

There are two DIV elements, one with an absolute position in the lower left corner of the main DIV. The second DIV is hidden and only displayed when clicking on a link. I want the second one to appear just below the first one, but because the first div&ap ...

The function e.preventDefault() appears to be ineffective when applied to both the submit button and anchor tag within an

In my ASP.Net Core MVC App View <form> <div class="container"> <div class="row"> <div class="col-md-offset-2 col-md-4"> <div class="form-group"> <input type="text" class="form-contr ...

Trouble encountered when transmitting JavaScript array through AJAX to Laravel

I am encountering an issue with sending a JavaScript array to a controller via an AJAX GET method. Here is the structure of my JavaScript: var requestData = JSON.stringify(commentsArray); console.log(requestData); //I can see the correct JSO ...

Is it possible to run concurrent PostgreSQL queries in NodeJS?

I'm unsure why, but the task is supposed to be run in parallel and should only take 2 seconds: const test = async () => { client.query("SELECT pg_sleep(2) FROM test", (err, result) => { console.log("DONE!"); }) client.query("SELECT pg ...

Struggling to retrieve information from session storage to pass along to a PHP class

Is there a way to fetch the email of the currently logged-in user from sessionStorage and send it to a PHP file? I have tried implementing this, but it seems to be not functioning properly. Could you assist me in resolving this issue? <?php $mongoCl ...

How can one locate a particular element/style/class in the dev tools DOM while debugging in MUI v5?

Exploring the DOM and pinpointing the specific component file and style block in MUI v4 is a straightforward process: Locating a particular element/style class in MUI v4 However, in MUI v5, this functionality is no longer available, making it challenging ...

Unusual occurrence while creating a unique identifier for a React component

I am working on creating a unique identification number for each React component, which will be assigned to the component upon mounting. Here is the approach I am taking: The callOnce function is used to ensure that a specific function is only executed on ...

Using jQuery to eliminate accepting input from form field

Looking to switch between a URL input and file input based on user selection of a radio button. Encountering an issue when attempting to remove the accept attribute from the input, resulting in an Uncaught TypeError: $(...).get(...).removeAttr is not a fu ...

Preserving alterations to media files using an image cropper

I've created a special controller for an image cropping tool that pops up over a media item in the content section. Right now I can manipulate the crops in the overlay, but when I click "Save Crops", the changes don't stick. However, if I use the ...

Tips for showcasing images retrieved from a REST API on the frontend, with the condition that only one image should be displayed using multer

I am experiencing an issue where only the image logo is being displayed in my frontend, rather than the entire image that I uploaded in string format on my backend. Can someone please help me troubleshoot this error and identify what may be wrong with my c ...

Is it possible to trigger a textbox text change event after autocompleting using jQuery

I recently implemented a jquery autocomplete plugin for a textbox: $('#TargetArea').autocomplete({ source: '@Url.Action("GetTarget", "Ads", new { type = "Zip", term = target })' }); The implementation is working as expected. ...

Cannot load JavaScript in Ajax tabs

I have implemented this ajax tabs on my website. However, the JavaScript code inside the content.htm file seems to be malfunctioning. Below is the code snippet I am using: Javascript $(document).ready(function(){ $("button").click(function(){ ...

What could be causing the change event to be triggered in a v-text-field when I press enter, despite not making any changes?

How come the @change event triggers in a v-text-field when I press enter, even if I haven't made any changes? HTML <div id="app"> <v-app> <v-content> <v-container> <v-text-field @change=" ...