Using Jquery to Display Json Data in a DataTable Using AJAX

I'm looking to customize the appearance of my datatable columns, like this :

Check out my example

However, when I try to implement it, the datatable displays a message saying "No data available in table". Here's my current code:

$(function() {
  $('#Spécialité').DataTable(
  {
    "ajax": {
      "processing": false,
      "url": "show_spe",
      "type": "GET",
      "datatype":'json',
      "async": 'true',
      success: function(resp) {
        let string = JSON.stringify(resp);
        let obj = JSON.parse(string);
        $.each( obj, function( key, value )
        {
        $('#Spécialité').append('<tbody><tr><td>'+obj[key]["id"]+'</td> <td>'+obj[key]["description"]+'</td><td><button type="button" class="btn btn-warning" id="edit'+obj[key]["id"]+'">Editer</button>&nbsp;&nbsp;<button type="button" class="btn btn-danger" id="edit'+obj[key]["id"]+'">Supprimer</button></td></tr></tbody>');
        });
      },

  },
  } );

Here is a snippet of my json data:

0 {
id : "0"
description : "test" }
1 {
id  : "1" 
description : "ligne2" }

Appreciate any assistance. Regards :)

Answer №1

The issue has been successfully resolved.

$(function() {

var data_table = $('#Specialty').DataTable({
  "ajax": {
    "url": "url",
    "method": "GET",
    "dataSrc": ""
    },
    "columns": [
      { "data": "id"},
      { "data": "description"},
        {
          data: 'id',
          render: function(data)
          {
           return '<button type="button" class="btn btn-warning" onclick="modalEdit('+data+')" name="edit" id="edit'+data+'">Edit</button>  <button class="btn btn-danger" type="button" onclick="modalDelete('+data+')" name="delete" id="delete'+data+'">Delete</button> ';
          }
        }
      ],
    "order": [[1, "asc"]]
});
});

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

What is the best way to execute a code once another has successfully completed its run?

Within milliseconds, I am required to update a JSON file with new data and then fetch that updated information. However, after posting the data into the JSON file, it appears that when attempting to retrieve it, the old data is returned instead of the newl ...

Retrieve the ancestors of a specific element within a deeply nested object

Storing data in a variable is very common, and this time we have it as follows: let categories = [ { name: "a", nodes: [ { name: "aa", nodes: [ { n ...

Creating my website with a unique inverse color scheme

I'm looking to change the color scheme of my webpage so that it is inverse (white becomes black and black becomes white) similar to the Dark Reader chrome extension: https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbiee ...

Retrieving information from incoming JSON within a Java servlet

I have a client sending me a JSON file via HTTP PUT. Here is the content of the file: { "nomPers": "Testworking", "prenomPers": "WorkingTest", "loginPers": "Work", "pwdPers": "Ing", "active": true }, For my WebService framewo ...

Preloading Vue dynamic routes for optimal performance

Currently dealing with a challenge on my Vue project and could use some help. I'm looking to prerender specific dynamic routes when I navigate to a particular route within the application. On the /works route, there's a list of items displa ...

Typeahead feature of Bootstrap functioning properly locally, but encountering issues on production server

I am facing a problem that I cannot figure out. I have created a function for an autocomplete search system using Type-ahead. This function works perfectly on my local machine, but when uploaded to the server, it breaks. Below is the syntax for my type-a ...

Container struggling to contain overflowing grid content items

While creating a grid in nextjs and CSS, I encountered an issue. Whenever I use the following code: display: grid; The items overflow beyond the container, even though I have set a maximum width. Instead of flowing over to the next row, the items just kee ...

Discover a term that is repeated multiple times within a single object

Consider this HTML: <div> <p>TEST TEST</p> <p>TEST</p> </div> How can I highlight all instances of the word TEST with just one button click? Currently, I am using a JavaScript function that applies bold styling to the ...

Using preventDefault in the compositionend event does not make any difference

var inputNode = document.getElementById('view_1'); inputNode.addEventListener('compositionend', function(e) { console.log(e.cancelable); // true e.preventDefault(); }); <div id="view_1" class="view" contenteditable="true> &l ...

What are the steps to turn off a service worker for subdomains?

I'm currently using a web application built with Angular that includes a service worker. Whenever I make PUT and GET requests to s3.amazonaws.com, the requests are always routed through the service worker. What steps should I take to configure my app ...

Choose the following span tag that comes after a specific HTML element using Jquery

I am attempting to locate the following span element with the class name slider-value after a specific HTML element has been selected. I have tried several solutions, but none of them seem to be working. While I could target it by utilizing the id, I pref ...

The challenge of character encoding when utilizing a combination of HTML5, jQuery, PHP

A webpage using HTML 5 has the following code in the header: <meta charset="utf-8"> Within the same page, an Ajax request is made using jQuery in the following manner: $.ajax({ url: "ajax/subscribe.php", type: "POST", encod ...

Guide to making a nested dropdown menu in React using an array of information

My data is structured in the following way: [ { group: 'team A', category: 'item1', task: 'task A' }, { group: 'team A', category: 'item1', task: 'task B' }, { ...

Purging the JavaScript output

Currently, I am calling an API and receiving a list of results. These results are then processed into an object for iteration and display. Below is the function responsible for this process: var getAvailability = () => { if (chosenData.hot ...

What is the best way to identify when a disabled button is clicked on in JQM?

I am struggling to grasp how JQM interacts with radio buttons. My code looks like this: <fieldset data-type="horizontal" data-role="controlgroup"> <label for="radio-choice-h-2a"> Brands </label> <input name="radio-choice-h-2" ...

I am receiving a 401 error when attempting to verify the token following a successful login

I've been working on a small project utilizing VueJS, Vue Router, and Laravel for the backend. Despite several attempts, I haven't been successful in implementing navigation guards. My login component is functioning properly. Here's my log ...

Mastering the art of utilizing callbacks in AngularJS for consuming an API

Having trouble handling data from an API and structuring it effectively before passing it to the controller. I've created a factory that retrieves user data from the API, but the provideAllUserData function is causing issues. Below is my services.js: ...

What is the best way to incorporate the latest value into the state during mutations?

Check out this code snippet I have: export default new Vuex.Store({ state: { bottles: 20, disabledBtn: false }, mutations: { REMOVE_BOTTLES(state) { if (state.bottles > 0) { state.bottles--; } }, ADD_BOTTLES(state, items) { ...

Why does it keep asking me to confirm form resubmission when I refresh the page after a postback? What mistake am I making?

I have developed a dashboard that initially displays as a blank/default state. Users now have the ability to load a saved state into the dashboard by clicking the 'Apply' button, which triggers the execution of the following code: function Close ...

Ensuring the Line Breaks in CSS and JavaScript to Easily Modify the Style

Is there a way to determine when a line will break so I can apply different styles? The design team needs 3 buttons in a grid (3 columns) with specific sizes. They want buttons with content that breaks onto the next line to have a border-radius of 13px, w ...