I just want to ask how can I add DATA ID on the buttons EDIT/DELETE here is my javascript for rendering datatable rows
I wanted to put Data ID on ROW_ID like for example delete?id=1 (CI: delete/1)
$('#data').dataTable({
"sScrollY": "400px",
"bProcessing": true,
"bServerSide": true,
"sServerMethod": "GET",
"sAjaxSource": "<?php echo base_url(); ?>pages/datatable",
"iDisplayLength": 10,
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"aaSorting": [[0, 'asc']],
"aoColumns": [ null, null, null,
{
"mData": null,
"sClass": "center",
"sDefaultContent": 'Edit / Delete',
}
]
}).fnSetFilteringDelay(700);
Assuming you're returning the ID value in your ajax, you can use mRender
...
"sClass": "center",
"mRender": function ( data, type, full ) {
return 'Edit / Delete';
}
full[0] is the data row with the ID parameter. If this is in a different column, obviously you'll to change the index accordingly
Related
I am trying to populate my data table with data I have populated with codeigniter..
Here is the object am getting
[{"checkbox":"<input type='checkbox' name='chk[]' id='expense_'185' value='185'\/>","expense_id":"185","category":"Others","description":"Payment Of Service For Sep $ October 2018","amount":"ksh.2,000","name":"Caroline Zachaeus","date":"27 Nov 2018"}, {"checkbox":"<input type='checkbox' name='chk[]' id='expense_'185' value='185'\/>","expense_id":"185","category":"Others","description":"Payment Of Service For Sep $ October 2018","amount":"ksh.2,000","name":"Caroline Zachaeus","date":"27 Nov 2018"}]
When am rendering, it says
TypeError: data is undefined
Here is my ajax code
var table = $("#datatable").DataTable({
"columnDefs" : [{"targets" : [ 7,0] , "orderable" : false},
{"targets" : [1], "visible": false},
],
"fixedHeader": true,
"aLengthMenu": [[25, 50, 100, 200, -1], [25, 50, 100, 200, "All"]],
"iDisplayLength": 25,
"order": [],
'processing': true,
'serverSide': true,
'serverMethod': 'get',
'ajax': {
'url':'<?=base_url()?>index.php/expenses/data'
},
"columns" : [
"checkbox",
"expense_id",
"category",
"description",
"amount",
"name",
"date",
"action",
],
})
Here is my page screenshot
where is your controller function
i think you are posting data from controller json type
and you have to set ajax datatype:'json'
then it will work for you
My table contains 25+ columns and rows are not limited.
All records come my client's daily usage.
Server side datatable is slowing down with only 100 rows.
Is there anything which can increase the speed of server side datatable or anything which can work better than datatable?
I am using CodeIgniter (php).
This is my current code:
var ETable = $('#example1').dataTable({
"infoEmpty": "No records available",
"sProcessing": "DataTables is currently busy",
"processing": true,
"bSort": false,
"bFilter": false,
"bAutoWidth": true,
"bLengthChange": true,
"serverSide": true,
"sAjaxSource": "URL",
"aLengthMenu": [[10, 25, 50,100], [10, 25, 50,100]],
"sSortAsc": [[1, 'desc']],
"iDisplayLength": 10,
"dom": 'Zlfrtip',
"bDeferRender": true,
"oLanguage": {
"sInfoFiltered": "",
"sProcessing": "img/loading.gif'>"
},
"tableTools": {
"sSwfPath": "assets/swf/copy_csv_xls_pdf.swf"
}
})
i am using datatable with bootstrap3. i want to apply filter after button is clicked. but when i clicked button it gives me TypeError: oTable.settings is not a function error. my datatable version is 1.10.6 and yadcf version is 0.8.7
here is my code
function init_datatable(table_id, records) {
// console.log('init table',$.parseJSON(records));
var oTable = $(table_id).dataTable({
aaData: $.parseJSON(records),
"sPaginationType": "bootstrap",
"bFilter": false,
"bInfo": false,
"sPageButtonActive": "active",
"aaSorting": [[0, 'desc']],
"bDeferRender": true,
"sDom": '<"top"if>rt<"bottom"lp><"clear">',
"aLengthMenu": [
[10, 20, 30, 50, -1],
[10, 20, 30, 50, "All"] // change per page values here
],
"iDisplayLength": 10,
"oLanguage": {
"sEmptyTable": "No data available"
},
"aoColumnDefs": [{
"aTargets": [0],
"bVisible": false,
"bSearchable": false
},
{
"bSortable": false,
"aTargets": [-1], // <-- gets last column and turns off sorting
"mData": null,
"mRender": function(data, type, full) {
return '<a data-original-title="Edit" id="edit_' + full[0] + '" data-placement="top" class="btn btn-xs btn-teal tooltips edit" href="javascript:void(0)"><i class="fa fa-edit"></i> Edit</a>';
}
}]
});
// .yadcf([
// {column_number: 1}
// ]);
$(table_id + '_wrapper .dataTables_length select').addClass("m-wrap");
$(table_id + '_wrapper .dataTables_length select').select2();
return oTable;
}
here is code for apply column filter
var pTable = init_datatable('#tbl_sample', data);
function apply_column_filter() {
yadcf.init(pTable, [
{column_number: 1}
]);
}
commented code in "init_datatble function is working. but when i use init it gives me error
yadcf.init should be use only for the new API with the capital D and since you are not using the new API, you should use the following way to init yadcf
$(table_id).dataTable({
......
}).yadcf([......]);
See comments in the code snippets on the showcase
//----------------------------------------------
//Example on how to define a custom filter function
//this function is goinf to be passesd to yadcf as custom_func parameter value
//and going to be tested against each value in the column
//----------------------------------------------
b.t.w if you want to filter some column pragmatically you should use the
exFilterColumn function , see docs
You can still use "yadcf.init" by getting the table reference. And this is how can get the reference of a table:
var api = new jQuery.fn.dataTable.Api(settings);
var oTable = api.table();
yadcf.init(oTable, [ {}]);
I have this in my datatable, and in my query, i order it by latest creation date, and in datatable i also sort with the date column which is the 16th column in my datatable, but it does not sort according my need.
may i know how to sort the date so that it populate correct information for me?
$(document).ready(function() {
var asInitVals = new Array();
var oTable = $('.datatable').DataTable({
"bProcessing": true,
"oLanguage": {
"sProcessing": "Loading data..."
},
"bSortCellsTop": true,
"iDisplayLength": 10,
"bLengthChange" : false,
"aLengthMenu": {{ Config::get('crud.aLengthMenu') }},
"bServerSide": true,
"bFilter": false,
"aaSorting": [[16, 'desc']],
"sAjaxSource": "{{ url('someurl.ajax') }}",
"columnDefs": [{
"targets": [ 0 ],
"visible": false,
"searchable": false
}]
});
I'm using datatables with the jeditable plugin, I have it setup to update directly to mysql, I need to validate some input fields to make sure a URL is being inserted. I have this code which validates jeditable fields (see jsfiddle) I need some help to integrate the jsfiddle with the table initializing code. I can add the onsubmit no problem but not sure how to add this part into my .makeEditable function, any help's appreciated thanks.
$('#url').editable(function(valurl) {
// Do your own stuff here...
return valurl;
},
http://jsfiddle.net/peter/CLuvp/
And my datatable is initialized with
var oTable3;
$(document).ready(function() {
oTable3 = $('#table3').dataTable( {
"sDom":'t<"bottom"ifpl><"clear">',
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "bSortable": false},
null,
null,
null,
null
]
}
).makeEditable({
sUpdateURL: "<?=$this->siteUrl()?>profiles/updatevalue",
"aoColumns": [null,
null,
{
type: 'text',
submit:'Ok',
cancel:'Cancel',
width: "100px"
}
I think you can simply include the options for each column in the aoColumns option, e.g.:
.makeEditable({
sUpdateURL: "<?=$this->siteUrl()?>profiles/updatevalue",
"aoColumns": [null, null,
{
submit: 'Save',
width: 200,
placeholder: 'Enter URL...',
onblur: 'submit',
onsubmit: function() {...}
}]
});
A cleaner way (or the aforementioned simply doesn't work) would be to use the url rule in that column:
.makeEditable({
sUpdateURL: "<?=$this->siteUrl()?>profiles/updatevalue",
"aoColumns": [null, null,
{
submit: 'Save',
width: 200,
placeholder: 'Enter URL...',
onblur: 'submit',
cssclass: 'url'
}]
});
See this demo for more details.