Jquery Datatables plugin

I want to see any example where i can see the data coming from many tables like I have a user Table in which I have ( userid,name,country) i am saving country integer value from dropdown in it like (1,NONAME,2) basically country itself is having a table havine(countryId,name) so country is used as foriegn key in my user table , how to show username with country name in jquerydatatables

Hi bellow isthe plugin .But you can use ajx call insted of static data that I used

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
head>
<body>
<table id="example">
<thead>
<tr><th class="site_name">Nameth><th>Url th><th>Typeth><th>Last modifiedth>tr>
thead>
<tbody>
tbody>
table>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js">script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js">script>
<script>
$("#example").dataTable({
"aaData":[
["Sitepoint","http://sitepoint.com","Blog","2013-10-15 10:30:00"],
["Flippa","http://flippa.com","Marketplace","null"],
["99designs","http://99designs.com","Marketplace","null"],
["Learnable","http://learnable.com","Online courses","null"],
["Rubysource","http://rubysource.com","Blog","2013-01-10 12:00:00"]
],
"aoColumnDefs":[{
"sTitle":"Site name"
, "aTargets": [ "site_name" ]
},{
"aTargets": [ 1 ]
, "bSortable": false
, "mRender": function ( url, type, full ) {
return '<a href="'+url+'">' + url + 'a>';
}
},{
"aTargets":[ 3 ]
, "sType": "date"
, "mRender": function(date, type, full) {
return (full[2] == "Blog")
? new Date(date).toDateString()
: "N/A" ;
}
}]
});
script>
body>
html>

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Salman Beg6y ago
Hi.
Follow this link for an example,

https://dotnet2developer.blogspot.com/2017/09/jquery-datatable-with-example.html

Thanks.
Laxmidhar Sahoo6y ago
Hi bellow isthe plugin .But you can use ajx call insted of static data that I used
<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
head>
<body>
  <table id="example">
  <thead>
    <tr><th class="site_name">Nameth><th>Url th><th>Typeth><th>Last modifiedth>tr>
  thead>
  <tbody>
  tbody>
table>
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js">script>
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js">script>
  <script>



$("#example").dataTable({
  "aaData":[
    ["Sitepoint","http://sitepoint.com","Blog","2013-10-15 10:30:00"],
    ["Flippa","http://flippa.com","Marketplace","null"],
    ["99designs","http://99designs.com","Marketplace","null"],
    ["Learnable","http://learnable.com","Online courses","null"],
    ["Rubysource","http://rubysource.com","Blog","2013-01-10 12:00:00"]
  ],
  "aoColumnDefs":[{
        "sTitle":"Site name"
      , "aTargets": [ "site_name" ]
  },{
        "aTargets": [ 1 ]
      , "bSortable": false
      , "mRender": function ( url, type, full )  {
          return  '<a href="'+url+'">' + url + 'a>';
      }
  },{
        "aTargets":[ 3 ]
      , "sType": "date"
      , "mRender": function(date, type, full) {
          return (full[2] == "Blog")
                    ? new Date(date).toDateString()
                    : "N/A" ;
      }
  }]
});
  script>
body>
html>