logo
Tags down

shadow

dataTable not doesnt display ajax data correct


By : Rabiya
Date : October 14 2020, 02:21 PM
it should still fix some issue Try removing the first json_encode(). There's no need to encode it twice.
code :
include_once('DB_Handler.php');

$result = mysqli_query($mysqli, "SELECT DocentID FROM gebruiker");

$rows = array();
while ( $row = mysqli_fetch_array($result))
{
    $rows[] = $row;
}

echo json_encode($rows);


Share : facebook icon twitter icon

Getting another page via ajax and showing data -> unable to display correct formatting


By : Ici Aidan
Date : March 29 2020, 07:55 AM
wish help you to fix your issue How do you initialize the javascript on the ajax load ?
You need to call the plugin's initialization method ($('#browser').treeview()) in your success callback, after you have loaded the html code in the DOM.
code :
 ... ajax({ ...
         success : function(data) {
             document.getElementById('browser').innerHTML = data;
             $('#browser').treeview(/*your options*/);
         }
     });

jQuery DataTable refreshing data - MVC View building table first, then trying to display data retrieved via ajax


By : user3737857
Date : March 29 2020, 07:55 AM
I wish did fix the issue. Use destroy :
code :
$('#accountRequestStatus').dataTable(
    {
       destroy : true, //<-- here
       paging: false,
       "data": data,
       "columns": [
           {
               "data": "CompanyName",
               "name": "BLAH BLAH"
           }
        ]
    }
);}

ajax sourced datatable does not display any data and no error message is shown


By : baloneyMan
Date : March 29 2020, 07:55 AM
Hope this helps I think your code will be fine if you fix what you are passing to "columns": [{"data": "d[id]"}, .... In the data property you would pass name of property from the data object so change it like "columns": [{"data": "id"}, ... and there you can also specify the title of this column when passing title property.
I give you a simple example with javascript source type of data, but it is analogical for the ajax sourced data.
code :
$(document).ready(function () {
    var data = {
      "d":[
        {
           "id":1,
           "username":"admin",
           "first_name":"admin",
           "last_name":"admin",
           "phone_no":"1234567210",
           "address":"abc",
           "email":"admin@gmail.com",
           "user_type":"admin"
        },
        {
           "id":2,
           "username":"user 1",
           "first_name":"user",
           "last_name":"first",
           "phone_no":"1234567210",
           "address":"address",
           "email":"user@gmail.com",
           "user_type":"user"
        }
      ]
    };
    
    $("#tableUserList").DataTable({
        "data": data.d,
        "columns": [
            {"data": "id", title: "ID"},
            {"data": "username", title: "Username"},
            {"data": "first_name", title: "First Name"},
            {"data": "last_name", title: "Last Name"},
            {"data": "phone_no", title: "Phone"},
            {"data": "address", title: "Address"},
            {"data": "email", title: "Email"},
            {"data": "user_type", title: "Type"}
        ]
    });   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">

<table id="tableUserList" class="table table-hover">
</table>

dataTable not display ajax data


By : Akira
Date : March 29 2020, 07:55 AM
will be helpful for those in need [Problem Solved] https://jsfiddle.net/4fukuma/o6ysgzps/2/
Change jquery file, using jquery-1.12.4.js
code :
$(document).ready(function() {
    var stockTable = $('#table1').dataTable({
    "ajax": "https://api.myjson.com/bins/zvujb",
    "columns": [{
      "data": "id"
    }, {
      "data": "name"
    }, {
      "data": "subtype"
    }, {
      "data": "approximate_count"
    }, {
      "data": "time_created"
    }],
    "columnDefs": [{
      "targets": 0,
      "checkboxes": {
        "selectRow": true
      },
      "searchable": false,
      "orderable": false,
      "className": 'dt-body-center',

      "render": function(data, type, full, meta) {
        return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
      }
    }],

    "select": {
      "style": "multi"
    },
    "order": [
      [4, "desc"]
    ],
    "scrollY": "400px",
    "scrollCollapse": true,

    }); // first table 

    var catalogTable = $('#table2').dataTable({

  "columns": [{
      "data": "id"
    }, {
      "data": "name"
    }, {
      "data": "subtype"
    }, {
      "data": "approximate_count"
    }, {
      "data": "time_created"
    }],
    "columnDefs": [{
      "targets": 0,
      "checkboxes": {
        "selectRow": true
      },
      "searchable": false,
      "orderable": false,
      "className": 'dt-body-center',

      "render": function(data, type, full, meta) {
        return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
      }
    }],

    "select": {
      "style": "multi"
    },
    "order": [
      [4, "desc"]
    ],
    "scrollY": "400px",
    "scrollCollapse": true,

    }); // Second table 

    stockTable.on('click', 'tbody tr' ,function() {
         $(this).toggleClass('selected');
    });
    catalogTable.on('click', 'tbody tr' ,function() {
         $(this).toggleClass('selected');
    });

    $('#LeftMove').on('click',function () {
        moveRows(catalogTable, stockTable);
    });

    $('#RightMove').on('click',function () {
        moveRows(stockTable, catalogTable);
    });

});

function moveRows(fromTable, toTable){
    var $row= fromTable.find(".selected");
    $.each($row, function(k, v){
        if(this !== null){
            addRow = fromTable.fnGetData(this);
            toTable.fnAddData(addRow);
            fromTable.fnDeleteRow(this);
        }
    });
}

Display Data In Table Using AJAX JSON PHP In Correct Way


By : Bartos Gábor
Date : March 29 2020, 07:55 AM
it fixes the issue It would be obviously better to get the data from the backend as a JSON output and use the JSON from the response to construct the table in the client side. The main reasons being:
Lesser code footprint between the client and server. Ability to change the view, if JSON, it is not tied with HTML.
Related Posts Related Posts :
  • For loop print in single line separated by spaces - JS
  • Add Javascript Variable into asp-route-data
  • Two different POST requests are making use of the same variable
  • Convert JSOn object into a flat JSON Array
  • Manually adding to an HTML range input gives unexpected results
  • Refreshing component after making api call Reactjs
  • Google App Script : Finding The Last Blank Row
  • I cant for the life of me figure out whats wrong with this script
  • Order divs by ID in Javascript
  • set new element class property value
  • How to pass a java variable to a different jsp page containing javascript?
  • Locked it method in chai
  • React JS : history.push is not a function error and it isn't navigating to a different page onclick of swal
  • How can i set timeout for localstorage for Angular 2+?
  • Must use destructuring props assignment
  • Jest Compared values have no visual difference. when testing arrays
  • Uncaught Error: #90211 ExtensionName Error - Node.JS, Heroku, JavaScript App using FusionCharts
  • Is it possible in firebase auth to update user and custom claims at the same time node?
  • Filter out capitalized letters
  • Yet Another Google Firebase Error "Function returned undefined, expected Promise or value"
  • How do I address method in a Vue.js component from inside callback function?
  • What is the name of this feature in JavaScript?
  • Vue js using scope-slot and trying to use a property from within but having no visibility
  • Dynamic javascript table won't display iterations from array
  • How to start/end smoke.js animation by clicking a nav button?
  • Map array of strings as object properties
  • Appending new inputs with JS wipes previous ones
  • Chai Request With URL instead of JS File
  • React Jest Async Tests
  • Unordered list bullet not showing at an expected location
  • How to create an array from an object?
  • How to get prefix name from html tag
  • javascript - Simulate a click event (tap with finger) on a button in iOS
  • How to get the value of checkboxes in a kendo grid
  • Uncaught TypeError: Object(...) is not a function at eval (global-styles.js)
  • Generate divs on scroll bottom
  • App deployed to Cloud Foundry fails to start
  • Show label and percentage in Google pie chart
  • Warn user before leaving web page if changes haven't been saved
  • Objects are not valid as a React child getting error when adding div?
  • why is callback not working in nodejs with mysql?
  • D3 v4 date ticks never display last item
  • How to assign a variable which function takes as a parameter
  • Javascript how hidden div onclick of phrase
  • Can I set state inside a useEffect hook
  • How can I draw a line to the highest datapoint in chart js?
  • Make <a> link activate expand text button
  • Django: fastest way to update the data that was once sent from template to view
  • JavaScript Scope of Vaadin's "AbstractJavaScriptComponent"
  • Firestore cloud functions summing subcollections values
  • d3.js in vue component - How to hook mouse events to elements?
  • Can't add href and class to list item through javascript
  • Jest - checking local storage is called in an async function that is being mocked
  • How do I print only the selection from my list group item?
  • Using take(1) with an Observable<boolean>?
  • Multi Step Form Javascript
  • Javascript checking if username already exists(duplicate)
  • Download text file from an external URL
  • get jquery post data in node.js
  • How to cache random results using Ember data?
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org