I am using Codeigniter and data table. I am displaying the list. Now what I am doing is, I have to display all the list to the role id 1 and limited access on role id 2.
I tried in the controller which is working
if($this->session->userdata['login_session']['role']==1 ){
$action='<sel ect></select>';
}
else{
$action='';
}
View
This is also working.
<table id="emp-leadList">
<thead>
<tr>
<th>Name</th>
<?php if($this->session->userdata['login_session']['role']==1 ){ ?><th>Action</th><?php }?>
</tr>
</thead>
<tbody></tbody>
</table>
But I am getting the issue on the script. I want to know what code I have to use in the script
JS
$('#emp-leadList').DataTable( {
language: {
sLengthMenu: "Show _MENU_",// remove entries text
searchPlaceholder: "Search",
emptyTable: "No record found",
search:""
},
"autoWidth": false,
"ordering": false,// remove sorting effect from header
"processing": true,
//"serverSide": true,
"order":[],
"scrollX": true,
//"bInfo" : false,
"pageLength": 25,
"paging": true,
//"deferRender": true,
// "bDeferRender": true,
"ajax": {
"url" : baseUrl + "/Customer_control/emp_list",
"type" : "POST"
// "dataSrc": ""
},
"columns": [
{ "data": "name" },
{ "data": "action" }
],
"columnDefs": [
//{ width: '3%', targets: 0 },
{ width: '13%', targets: 0 },
{ width: '8%', targets: 1 }
]
});
Would you help me out in this?
Related
i have issue on use treeTable while reload data and after save and update data form
$(document).ready(function() {
const datajson = <?php echo $data_json ?>;
$('#tablejson').treeTable({
"data": datajson,
"collapsed": true,
"responsive": true,
"lengthChange": true,
"autoWidth": false,
"fnDrawCallback": function() {
$('[data-toggle="tooltip"]').tooltip();
},
"aLengthMenu": [
[10, 50, 100, -1],
[10, 50, 100, "All"]
],
"iDisplayLength": 10,
"columns": [{
"data": "nama_module",
},
{
"data": "controller",
},
{
"data": "function",
},
{
"data": "nm_group",
},
{
"data": "label",
},
{
"data": "btn"
}
],
"order": [],
});
$('#btn-reload').click(function() {
$('#tablejson').dataTable().api().ajax.reload();
});
});
i try to click button for reload tabel use $('#tablejson').dataTable().api().ajax.reload(); but not working, this is happen while i use treeTable, if i use datatable only its work for reload or refresh table.
does anyone have the same case with me ? thanks
finally, i found a solution in my case, i use code like this
$('#btn-reload').click(function() {
$('#tablejson').DataTable()
.order([2, 'desc'])
.draw();
});
thanks....
I am stuck in that I want to reset or restart the column number from 1 after executing search in Laravel using ajax in datatable.
The code i have written so far
<table class="table table-bordered table-striped table-condensed flip-content" id="server-side-datatables">
<thead>
<tr>
<th class="dt-body-left">Serial No.</th>
<th>Document Type</th>
<th>Document Nr.</th>
<th>Date</th>
<th>Amount</th>
<th>CURENCY</th>
<th>Merchnat</th>
<th>Commnets</th>
<th width="10%">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
$("#search-frm").submit(function(){
oTableCustom.draw();
return false;
});
// $("#search-frm").submit(function(e) {
// table.fnPageChange(0);
// table.fnReloadAjax();
// return false;
// });
$.fn.dataTableExt.sErrMode = 'throw';
var cur_month = '{{date("M")}}';
var title = 'WEBPAL WEB SERVICES BORDEROU CONTABILITATE LUNA:'+ cur_month;
var filename = 'WEBPAL WEB SERVICES BORDEROU CONTABILITATE LUNA:'+ cur_month;
var oTableCustom = $('#server-side-datatables').DataTable({
processing: true,
dom: 'Bfrtip',
serverSide: true,
searching: false,
ajax: {
"url": "{!! route($moduleRouteText.'.data') !!}",
"data": function ( data )
{
data.search_start_date = $("#search-frm input[name='search_start_date']").val();
data.search_end_date = $("#search-frm input[name='search_end_date']").val();
data.doc_number = $("#search-frm input[name='doc_number']").val();
data.search_parteners = $("#search-frm input[name='search_parteners']").val();
}
},
"order": [[ 0, "asc" ]],
// "fnRowCallback" : function(nRow, aData, iDisplayIndex){
// $("td:first", nRow).html(iDisplayIndex +1);
// return nRow;
// },
columns: [
{ data: 'rownum', name: 'rownum' },
{ data: 'doc_type', name: 'doc_type' },
{ data: 'doc_number', name: 'doc_number' },
{ data: 'doc_date', name: 'doc_date'},
{ data: 'amount', name: 'amount' },
{ data: 'currency', name: 'currency' },
{ data: 'partener', name: '{{ TBL_PARTENER }}.id'},
{ data: 'comments', name: 'comments' },
{ data: 'action', orderable: false, searchable: false}
],
lengthMenu: [
[ 10, 25, 50, -1 ],
[ '10 rows', '25 rows', '50 rows', 'Show all' ]
],
columnDefs: [
{ "type": "num-fmt", "targets": 4, "className": "text-left", appliesTo: 'pdf' }
],
buttons: [
{
extend: 'pageLength'
},
{
extend: 'pdfHtml5',
orientation: 'landscape',
title: title,
filename:filename,
exportOptions: {
columns: [ 0, 1, 2,3,4,5,6,7 ],
},
customize : function(doc){
doc.content[1].table.widths =
Array(doc.content[1].table.body[0].length + 1).join('*').split('');
doc.styles.tableHeader.alignment = 'left';
},
},
]
});
});
</script>
#endsection
I want output like this
just use CSS code
tbody {
counter-reset: row;
/* Set the row counter to 0 */
}
tbody tr::before {
counter-increment: row;
/* Increment the row counter*/
content: counter(row) ": ";
/* Display the row */
}
I am implementing datatable in my project using instruction from https://datatables.net/examples/data_sources/server_side.html
Now I have implemented same jquery code like :
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "../server_side/scripts/server_processing.php"
} );
} );
but its not working in my project and gives the error of :
DataTables warning: ********** Requested unknown parameter '0' for row 0. For more information about this error, please see http://datatables.net/tn/4
but when I specify columns in jquery like :
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "../server_side/scripts/server_processing.php",
"columns": [
{ "data": "id"},
{ "data": "item" },
{ "data": "name" }
],
} );
} );
then it works perfectly, So whats the issue here, why I can not use it without specifying columns ?
Ajax Response :
{
"draw": 1,
"recordsTotal": 57,
"recordsFiltered": 57,
"data": [
[
1,
"item1",
"name1"
],
[
2,
"item2",
"name2"
]
]
}
As far as I can see, you are accessing an array of objects instead of a two dimensional array.
Datatables default behavior is accepting data in this format:
[
[ "row 1, cell 1", "row 1, cell 2", "row 1, cell 3" ],
[ "row 2, cell 2", "row 2, cell 2", "row 2, cell 3" ]
]
If you use a different data source format, as I believe you do, you must specify the columns so datatables can map them.
You can find more information here
If possible, provide your json response to check if this is the case.
Ok, I can see your response now, and it works if you wrap your ids in double quotes.
Try this - create a file named response.php with this content:
{
"draw": 1,
"recordsTotal": 57,
"recordsFiltered": 57,
"data": [
[
"1",
"item1",
"name1"
],
[
"2",
"item2",
"name2"
]
]
}
Create another file named test.php with this content:
<head>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Item</th>
<th>Name</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Item</th>
<th>Name</th>
</tr>
</tfoot>
</table>
<script>
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "./response.php"
} );
} );
</script>
</body>
Upload both files to your server and test it - it works.
I am using the jquery DataTables with CodeIgniter to display the data on the listing page. My query is that how can I change the class of the particulal field on basis of the condition.
I have a status field, if the status is enabled I want to add the class which shows the icon with enable status. If I disable it, then it will show the icon with disable status.
I am not able to change the class.
Here is the code.
This code is in my controller function which fetches the data.
function list_op_data() {
$this->datatables->select('om.op_id,om.is_status,om.op_name,om.op_address1,om.op_address2,cm.stCity,sm.stState,co_m.stCountryName ,om.op_pincode,om.op_contact_name,om.op_email,om.op_phone_no', false);
$this->datatables->join("country_master co_m", 'om.op_country=co_m.intCountryId');
$this->datatables->join("state_master sm", 'om.op_state=sm.intStateId');
$this->datatables->join("city_master cm", 'om.op_city=cm.intCityId');
$this->datatables->from('op_master om');
$this->datatables->where(array('om.is_deleted' => '0'));
$this->datatables->add_column('action', '<i class=" glyphicon glyphicon-ok"></i><i class="glyphicon glyphicon-pencil"></i> <i class="glyphicon glyphicon-trash"></i> ', 'op_id,is_status');
$data = $this->datatables->generate('json');
echo $data;
}
And jquery data tables code is
var tconfig = {
"processing": true,
"serverSide": true,
"ajax": {
"url": BASE_URL+"admin/op_master_details/list_op_data",
"type": "POST",
"data": "json"
},
"columnDefs": [
{
"searchable": false
}
],
"iDisplayLength": 5,
"aLengthMenu": [[5, 10, 50, -1], [5, 10, 50, "All"]],
"paginate": true,
"paging": true,
"searching": true,
"aoColumnDefs": [
{
"targets": [0],
"visible": false,
"searchable": false
},
{"bSortable": false, "aTargets": [12]},
{
"targets": [1],
"visible": false,
"searchable": false
},
]
};
var oTable = $('#operator_list_data').dataTable(tconfig);
Any help would be appreciated.
Thanks.
You need to use fnRowCallback. Add this to your initialisation code:
...
],
'fnRowCallback': function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
// Get the status form the row object
var status = aData[1];
// check the status
if(status == 'Yes'){
// add the class to the <tr>
$(nRow).addClass('glyphicon glyphicon-ok');
}
return nRow;
},
...
This will add the class glyphicon glyphicon-ok to the <tr> when status = 'Yes'. If you want to add the class to a different control, you will have to modify the addClass statement to use a different selector. e.g $(nRow).children('td')[3]).find(i).addClass()
I sort the data in the table by ORDER BY in SQL request. But when I apply DataTables on my table, it changes the sorting completely...I got "bSortable":false in all columns...Does anybody know what is causing this? :( The DataTable code looks like this:
oTable = $('#tabulkaKalk').dataTable({
"bJQueryUI": true,
"sDom": '<"H"f>rtS<"F"i>',
"sScrollY": iHeight,
"bFilter": false,
"bAutoWidth": true,
"bPaginate": false,
"bRetrieve":true,
"aoColumns": [
{ "sType": "czech", "bSortable":false },
{ "sType": "natural", "bSortable":false },
{ "sType": "natural", "bSortable":false },
{ "sType": "natural", "bSortable":false }
]
});