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....
Related
I am mounting a table and perfect until I want to show more data, I have read that I can use server side but I have not found any example how to consume an web service that returns json
html
<table id="datatable-buscador" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>Nº reco.</th>
<th>Fecha</th>
<th>Id trabajador</th>
<th>Trabajador</th>
<th>Id empresa</th>
<th>Ref. Int.</th>
<th>Nombre empresa</th>
<th>Visado</th>
<th>Prop.</th>
</tr>
</thead>
</table>
javascript
let $tabla = jQuery("#datatable-buscador");
$tabla.dataTable().fnDestroy();
$tabla.dataTable({
"scrollX": true,
"lengthMenu": [[15, 25, 30, -1], [15, 25, 30, "All"]],
"lengthChange": false,
"order": [1, "desc"], //columna 0 y ordenar desc
"language": { "url": "/src_reconocimientos/includes/js/utils/spanish.json" },
"ajax": {
url: "/example/example.php",
type: "POST",
dataType: "JSON",
data: { "tipo": tipo, "dias_reco": diasReco },
timeout: 180000 //3 min
},
"createdRow": function (row, data, dataIndex) {
jQuery(row).attr("id", data.N_RECONOCIMIENTO);
},
"columnDefs": [
{
// targets: "_all",
targets: [0, 1, 2, 4, 5, 7, 8],
className: 'dt-body-center'
},
],
"columns": [
{ "data": "N_RECONOCIMIENTO" },// 0
{
"data": null,
render: function (data, type, full, meta) {
return formatFecha(data.FECHA_RECONOCIMIENTO);
}
}, //1
{ "data": "DNI" }, // 2
{ "data": "NOMBRE_TRABAJADOR" }, // 3
{ "data": "EMPRESA" }, // 4
{ "data": "REF_INTERNA" }, // 5
{ "data": "NOMBRE_CLIENTE" }, // 6
{ "data": "VISADO" }, // 7
{ "data": "PROP" }, // 8
]
});
json:
{
"data": [{
"N_RECONOCIMIENTO": 29457,
"FECHA_RECONOCIMIENTO": "2021-10-11",
"DNI": "28460Q",
"NOMBRE_TRABAJADOR": "CAMPS",
"EMPRESA": 112390,
"REF_INTERNA": "Ref_interna?",
"NOMBRE_CLIENTE": "example",
"VISADO": "N",
"PROP": "Prop?"
}, {
"N_RECONOCIMIENTO": 2907,
"FECHA_RECONOCIMIENTO": "2021-10-14",
"DNI": "414J",
"NOMBRE_TRABAJADOR": "CARLOS",
"EMPRESA": 103482,
"REF_INTERNA": "Ref_interna?",
"NOMBRE_CLIENTE": "(ACUERDO DE COLABORA)",
"VISADO": "N",
"PROP": "Prop?"
}, {
"N_RECONOCIMIENTO": 2619,
"FECHA_RECONOCIMIENTO": "2021-04-16",
"DNI": "72306W",
"NOMBRE_TRABAJADOR": "DIEZ",
"EMPRESA": 29514,
"REF_INTERNA": "Ref_interna?",
"NOMBRE_CLIENTE": "example 365, S.L.",
"VISADO": "S",
"PROP": "Prop?"
}]
}
when pointing to the url of the ajax what it returns me is a json that changes the content according to the data that I pass to it, but when I want to get more 50000 records, the table fails me, so I want to implement serverside, how can I implement it and keep pointing the same url? I don't see anything related in the datatables examples
add info:
It is a very simple company webservice that receives data through my php script with cURL, in this it receives a type of request (it can be 1, 2, 3) and receives parameters (variables), the web services does the queries, simple queries and returns the result as json, it cannot be interacted any more, that's why when I try to process 50000 the datatable gives me an error. my question is: how can I do an intermediate step to process so many lines?
I want to call a function that processes my datatable at the serverside when I close a bootstrap modal.
This is my jquery
$('#launch').on('hidden.bs.modal', function () {
fill_datatable();
console.log(123);
});
console.log(333);
function fill_datatable(filter_status = ''){
var dataTable = $('#dataTable2').DataTable({
"processing" : true,
"pageLength": 25,
"columnDefs": [
{ "searchable": true, "targets": 0 }
],
"serverSide" : true,
"createdRow": function(row, data, index) {
switch (data[8]) {
default:
$(row).css('background-color', 'white');
}
},
"order" : [],
"ajax" : {
url:"ajax/fetch.php",
type:"POST",
data:{ filter_status:filter_status }
},
"columnDefs": [
{ "width": "40%", "targets": 3,
"className": "text-justify", "targets": 3,
"searchable": true, "targets": 3,
}
]
});
}
When the modal closes I can see 123 in my console but it doesnt call the fill_datatable() function, which is placed directly outside of the on() method.
Note that the fill_datatable() function works because it processes the table on page load, but I want it to refresh after an action is done in the modal so I see the latest changes.
Destroy the dataTable method before calling the function, using $('#dataTable2').DataTable().destroy();
Try define function fill_datatable() before $('#launch').on('hidden.bs.modal', function () {}.
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 }
]
});
So What I'm trying to do is populate an Extjs line graph. I've created a JSON store that pulls json from a remote page and for some reason my graph is not being populated.
Heres my Ext code:
Ext.onReady(function(){
var store = new Ext.data.JsonStore({
autoDestroy: true,
url: 'http://myURL.com',
storeId: 'graphStore',
root: 'rows',
idProperty: 'date',
fields: ['date', 'posts']
});
new Ext.Panel({
title: 'Posts',
renderTo: 'test_graph',
width:500,
height:300,
layout:'fit',
items: {
xtype: 'linechart',
store: store,
xField: 'date',
yField: 'posts',
listeners: {
itemclick: function(o){
var rec = store.getAt(o.index);
Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('date'));
}
}
}
});
});
And here's the JSON that is supposed to be populating it:
{"rows":[
{"date":"2010-06-11","posts":4},
{"date":"2010-06-12","posts":3},
{"date":"2010-06-13","posts":1},
{"date":"2010-06-14","posts":2}
]}
I can't figure out for the life of me why this won't work. The graph axis shows up, but the line doesn't render.
I was having the same problem, even with store.autoLoad set to true
Actually, everything worked great when I hardcoded the json results into the page. But when I tried to use ajax to pull it from a database, the line never rendered! This wasn't a problem reading from the database, either. I verified that it was definitely pulling from the database.
I solved this by setting autoLoad to false and added store.load() after actual chart rendered and it worked totally fine.
you may want to set the autoLoad property to true on the store, such as:
var logsRemoteJsonStore = new Ext.data.JsonStore
({
proxy: logsRemoteProxy
, storeId: 'ourRemoteStore'
, autoLoad: true
, fields: logsRecordFields
});
In fact, verified that the following code from http://joefreeman.co.uk/projects/extstock/part-2.html does work, so it is almost certainly the autoload parameter, but review the other parameters in the example below.
Ext.onReady(function () {
var store = new Ext.data.JsonStore({
baseParams: {
symbol: 'GOOG'
},
autoLoad: true,
url: '/CMSAdmin/ReadSiteStatisticsEightMonthSummary/',
root: 'data',
fields: ['date', 'close']
});
new Ext.Window({
title: 'GOOG',
width: 400,
height: 300,
items: new Ext.chart.LineChart({
store: store,
xField: 'date',
yField: 'close'
})
}).show();
});
json:
{
"symbol": "GOOG",
"start": 1279627043,
"span": 32140800,
"data": [{
"close": 462,
"date": "2010-08-20"
}, {
"close": 476,
"date": "2010-09-09"
}, {
"close": 527,
"date": "2010-09-28"
}, {
"close": 601,
"date": "2010-10-15"
}, {
"close": 620,
"date": "2010-11-03"
}, {
"close": 591,
"date": "2010-11-22"
}, {
"close": 592,
"date": "2010-12-10"
}, {
"close": 598,
"date": "2010-12-30"
}, {
"close": 631,
"date": "2011-01-19"
}]
}