I am rendering a DataTable with php, getting the data from a MySQL-Database.
The table get rendered, but the are columns in the table, which contain links of images (4th column) or links to other websites (on the 6th column). How can I render the links of the images, as images directly? And the links of the websites, as an Hypertext-Link not a text?
Here is my jquery code:
$(document).ready(function() {
var dataTable = $('#oShopTab').DataTable( {
"processing": true,
"serverSide": true,
"ajax":{
url :"aPage-data.php", // json datasource
type: "post"
}
});
});
HTML:
<table id="oShopTab" class="display">
<thead>
<tr>
<th>pId</th>
<th>sName</th>
<th>lName</th>
<th>logo Link</th>
<th>Incentiv</th>
<th>Go To Shop URL..</th>
</tr>
</thead>
<tfoot>
<tr>
<th>pId</th>
<th>sName</th>
<th>lName</th>
<th>logo Link</th>
<th>Incentiv</th>
<th>Go To Shop URL..</th>
</tr>
</tfoot>
</table>
Related
DataTable with edit delete buttons for separate rows.
I am new to web development. I have learn to add, edit and delete DataTables. I want to have the functionality of editor data table (like common add edit delete buttons) to work for MySQL data.
I achieved adding new data by using bootstrap modals and connected to db via PHP. I don't know that for edit and delete options. So, I have implemented row wise edit delete buttons.
What am I doing wrong here? I need a code to select the row and edit from common edit button on top and that should change both client and server side.
And is it possible to do that without using Editor-DataTable?
If you can use the extensions, there is a Select extension that you can add that lets you select rows from your table. After that, you could find out what rows are selected on the button press event and create a modal to make your changes or however you want to handle that.
$(document).ready(function() {
var table = $('#example').DataTable({
select: true
});
$("#deleteBtn").on("click", function() {
selectRows = table.rows({
selected: true
});
//perform your delete CRUD update.
//remove from UI
selectRows.remove().draw();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://nightly.datatables.net/select/js/dataTables.select.js?_=9a6592f8d74f8f520ff7b22342fa1183"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link href="https://nightly.datatables.net/select/css/select.dataTables.css?_=9a6592f8d74f8f520ff7b22342fa1183.css" rel="stylesheet" type="text/css" />
<div class="container">
<button id="deleteBtn">Delete</button>
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Technical Author</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Javascript Developer</td>
</tr>
<tr>
<td>Jenna Elliott</td>
<td>Financial Controller</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
</tr>
</tbody>
</table>
</div>
Hi I have the following table design. I dont want the first and last column to be sortable. I have set accordingly.But the icon asc still appears on the first column but not on the last column. But when I try to sort the second column it goes off.
<table id="userTable" name='userTable' class="table table-striped table-bordered bootstrap-datatable " data-column-defs='[{"sortable": false, "targets": [0,3]}]' style='table-layout: fixed;'>
<thead>
<tr>
<th class="no-sort" style='width: 10%;'>No.</th>
<th style='width: 25%;'>First Name</th>
<th style='width: 20%;'>last Name</th>
<th style='width: 25%;'>Details</th>
</tr>
</thead>
</table>
Even if you disable sorting for a column, the dataTables sort order still remain. By default order is [0, 'asc']; simply set order to target the #2 column instead :
var table = $('#example').DataTable({
//....
order: [[ 1, "asc" ]] //column indexes is zero based
})
demo -> http://jsfiddle.net/6k26o7mk/
Or use order: [] if you not want any default order at all (icons will be hidden until the user sort the table).
In version 1.10.20 it worked for me just like this:
$(document).ready(function(){
$('#example').DataTable({
ordering: false, //disable ordering
initComplete: function( settings, json ) {
$("th").removeClass('sorting_desc'); //remove sorting_desc class
}
});
});
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<table id="example" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
I was not able to get this working on datatables version: 1.10.11 with the DataTables download builder
Being that case, I used jQuery as a workaround to remove the sorting class, which in turn will remove the icon.
$(document).ready(function () {
$('#my-dataTables').DataTable({
paging: false,
ordering: false,
info: false,
});
// Removes icon
$('.sorting_asc').removeClass('sorting_asc');
});
I have a datatable that loads about 20,000 (minimum) numbers (rows of data) . With that said , i use the pipeline feature of jquery datatables since it easily handles a large chunk of data .
The issue is that i want to know how to add a new row dynamically by passing the id to it .
Below is my jquery code :
$(document).ready(function() {
available_numbers();
function available_numbers(){
$('#available_numbers').dataTable( {
"processing": true,
"serverSide": true,
"ajax": $.fn.dataTable.pipeline( {
url: 'fetch_available_numbers.php',
pages: 5
})
} );
}
} );
And below is the table :
<table id="available_numbers" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Phone Number</th>
<th>Assigned To (User Group)</th>
</tr>
<tfoot>
<tr>
<th>Phone Number</th>
<th>Assigned To (User Group)</th>
</tr>
</tfoot>
</table>
The values are fetched in json format , just like the server side script in datatables .
Thanks.
I'm having a problem with the implementation of DataTables, I simple can't make it work in a returned table from a PHP script. Suppose this simple PHP script named simple_table.php:
<?php
echo '
<table class="table_type">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>';
?>
Now I also have the next very simple jQuery script declared after the </body> tag in the hipotetic html file:
$(document).ready( function () {
$('table.table_type').dataTable();
} );
$('div.push_button li').click(function() {
var content = $(this).closest('div').children('div.content');
$.get('simple_table.php', {}, function(html_table) {
content.html(html_table);
} );
} );
What is needed to be made for this simple example to work and keeping in it simple? The problem is that there is no solution for this useful scenario of a dynamic table made by a so simple script!
Well, maybe you have to have a preexisting <table> and only yhen be able to filled up the respective <tr>...
The problem is because you are running .dataTable() before the page has the element table.table_type. Instead of calling .dataTable() when the page loads, you need to run it once the table has been added to your <div>.
$('div.push_button li').click(function() {
var content = $(this).closest('div').children('div.content');
$.get('simple_table.php', {}, function(html_table) {
content.html(html_table);
content.find('table').dataTable();
} );
} );
I'm building an administration panel app using Codeigniter and would like to fetch my member records using the Server Side Processing method of jQuery DataTables (since i've got quite a large number of member records). I'm using the Ignited DataTables CI library to fetch and attempt to display my data. I was able to get this working with the standalone version of Datatables Server Side Implementation found here, but would like to get this working with CodeIgniter in order to be in line with the rest of my app. Here's my code so far:
CI Controller:
$this->load->library('DataTables');
$this->load->model('table_model', 'table');
$this->datatables->select('member_id, username,email, first_name, last_name')
->from($this->table->getTable('members'))
->join($this->table->getTable('groups'), 'members.group_id = member_groups.group_id', 'left')
->select('group_title');
echo $this->datatables->generate();
exit;
HTML:
<table id="members">
<thead>
<tr>
<th>Member ID</th>
<th>Username</th>
<th>Email</th>
<th>First Name</th>
<th>Last Name</th>
<th>Group Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7" class="dataTables_empty">Loading members...</td>
</tr>
</tbody>
</table>
jQuery:
$(document).ready(function() {
$("#members").dataTable({
"bProcessing" : true,
"bServerSide" : true,
"sAjaxSource" : "/members/fetch_members",
"sPaginationType" : "full_numbers"
});
});
JSON response:
{
"sEcho": 0,
"iTotalRecords": 11007,
"iTotalDisplayRecords": 11007,
"aaData": [ //member records here],
"sColumns": "member_id,username,email,first_name,last_name,group_title"
}
Any and all help would be appreciated!
You have to modify the library to work with POST instead of GET
or
You have to configure datatable to work with GET
here is an example of configuring method, use it to suit your need
http://www.datatables.net/release-datatables/examples/server_side/post.html