sorry for my bad english,
i want to show image in my table using datatables.
var t = $("#mytable").dataTable({
initComplete: function() {
var api = this.api();
$('#mytable_filter input')
.off('.DT')
.on('keyup.DT', function(e) {
if (e.keyCode == 13) {
api.search(this.value).draw();
}
});
},
oLanguage: {
sProcessing: "loading..."
},
processing: true,
serverSide: true,
ajax: {"url": "wisataadmincontroller/json", "type": "POST"},
columns: [
{
"data": "id_wisata",
"orderable": false
},{"data": "nama_wisata"},{"data": "alamat_wisata"},{"data": "no_telp"},{"data": "kategori"},{"data": "longitude"},{"data": "latitude"},{"data": "gambar","render": function(data, type, row) {
return '<img src="'+data+'"style="height:100px;width:100px;" />';
}},{"data": "like"},
{
"data" : "action",
"orderable": false,
"className" : "text-center"
}
],
order: [[0, 'desc']],
rowCallback: function(row, data, iDisplayIndex) {
var info = this.fnPagingInfo();
var page = info.iPage;
var length = info.iLength;
var index = page * length + (iDisplayIndex + 1);
$('td:eq(0)', row).html(index);
}
});
});
and the result :the images are empty
the images are empty because the image source only contains the images file name,
so how to use baseurl in datatables?
Just plug it in?
<img src="<?php echo base_url(); ?>'+data+'"style="height:100px;width:100px;" />
Related
I have used datatable individual column searching .
below is my js code:
var BindDataTable = function (response) {
var oTable;
$("#example").DataTable({
initComplete: function () {
// Apply the search
this.api().columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change clear',
function () {
if (that.search() !== this.value) {
that.search(this.value).draw();
}
});
});
},
"searching": true,
// dom: '<"class">Blfrtip',
dom: "<'row mb-3'<'col-sm-12 col-md-2 col-lg-2'l><'col-sm-12 col-md-10 col-lg-10 datatableButtonsCon text-right'Bf>>" +
"<'row'<'col-sm-12 datatablesData'tr>>" +
"<'row mt-4'<'col-sm-12 col-md-4 col-lg-6 infoCon'i><'col-sm-12 col-md-8 col-lg-6 pagCon'p>>",
"bServerSide": true,
"sAjaxSource": "/AspNetStudents/GetStudents",
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
type: "POST",
data:aoData,
url: sSource,
success:fnCallback
})
},
"aoColumns": [
{ "mData": "Name" },
{ "mData": "RollNo" },
{ "mData": "CellNo" },
{ "mData": "JoiningDate" },
{ "mData": "ClassName" },
{ "mData": "TotalWithoutAdmission" },
{ "mData": "UserStatus" },
]
});
oTable = $('#example').DataTable();
oTable.columns(0).search("data");
oTable.draw();
I have also attached the backend C# code to access the individual datatable column value to controller.
How can we access the datatable individual column searched value to controller(C# .net Mvc) while using the server side processing?
just as an idea, I know it makes ajax request every time a draw method is called.In this case, the data can be serialized and sent,then the searched data can be accessed by performing a parse operation in the controller.
$.ajax({
type: "POST",
dataType: "json",
url: sSource,
data: function (data) {
data.filters = $(".filter").serialize();
},
success:fnCallback
})
// search
$(".filter").on("change", function (e) {
e.preventDefault();
table.draw();
});
...
// in controller
// parse request
I try to update a row in my datatable with .net core. Datatable show data and have a new/delete button that works. But when I try to edit a row, I can't get it to work.
Here is mi index.cshtml. Thanks
"ajax": {
"url": "../LoadIntervaloTrabajo",
"type": "POST",
"data": { "codigo": #Model.codigo},
"datatype": "json"
},
"columns": [
{ "data": "horario", "autowidth": true },
{ "data": "codigo", "autowidth": true },
{ "data": "descripcion", "autowidth": true },
{ "data": "horainicio", "autowidth": true },
{ "data": "duracion", "autowidth": true },
{ "data": "cortentrada", "autowidth": true },
{ "data": "cortintermedia", "autowidth": true },
{ "data": "cortsalida", "autowidth": true },
{ "render": function (data, type, row) {
return "<a href='#' class='btn btn-info' onclick=EditData('" + row.codigo + "'); >Editar</a>";
}
},
function EditData(codigo) {
var table = $("#customerDatatable").DataTable();
var r = table.rows(".selected").nodes()[0];
if ($(table.buttons(".editButton")[0].node).find("span").text() == "Cancel") {
$(r).children("td").each(function (i, it) {
if (i > 0) {
var od = table.cells(it).data()[0];
$(it).html(od);
}
});
setButtons('cancel');
} else {
$(r).children("td").each(function (i, it) {
if (i > 0) {
var h = $("<input type='text'>");
h.val(it.innerText);
$(it).html(h);
}
});
setButtons('edit');
}
I try to update a row in my datatable with .net core.
To implement updating row functionality, you can refer to the following code snippet.
Render two buttons for updating row within the last column
"columns": [
{
"data": "horario", "autowidth": true
},
{ "data": "codigo", "autowidth": true },
{ "data": "descripcion", "autowidth": true },
{ "data": "horainicio", "autowidth": true },
{ "data": "duracion", "autowidth": true },
{ "data": "cortentrada", "autowidth": true },
{ "data": "cortintermedia", "autowidth": true },
{ "data": "cortsalida", "autowidth": true },
{
"render": function (data, type, row) { return "<a href='#' class='btn btn-info' onclick = EditData(this); >Editar</a><a href='#' class='btn btn-info btn-hidden' onclick = UpdateData(this); >Updatear</a>"; }
}
]
JS function
function EditData(btnedit) {
//find current row
var $row = $(btnedit).parent().parent();
var $tds = $row.find("td").not(':nth-child(2)').not(':last');
$.each($tds, function (i, el) {
var txt = $(this).text();
$(this).html("").append("<input type='text' value=\"" + txt + "\">");
});
$(btnedit).siblings("a").removeClass("btn-hidden");
$(btnedit).addClass("btn-hidden");
}
function UpdateData(btnupdate) {
var $row = $(btnupdate).parent().parent();
var horario = $row.find("td:nth-child(1)").find("input").val();
var codigo = $row.find("td:nth-child(2)").text();
var descripcion = $row.find("td:nth-child(3)").find("input").val();
var horainicio = $row.find("td:nth-child(4)").find("input").val();
var duracion = $row.find("td:nth-child(5)").find("input").val();
var cortentrada = $row.find("td:nth-child(6)").find("input").val();
var cortintermedia = $row.find("td:nth-child(7)").find("input").val();
var cortsalida = $row.find("td:nth-child(8)").find("input").val();
var data_for_update = { "horario": horario, "codigo": codigo, "descripcion": descripcion, "horainicio": horainicio, "duracion": duracion, "cortentrada": cortentrada, "cortintermedia": cortintermedia, "cortsalida": cortsalida };
//console.log(data_for_update);
//make request to update data
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: "/{controller_name_here}/Update",
data: JSON.stringify(data_for_update),
success: function (json) {
console.log(json);
var $tds = $row.find("td").not(':nth-child(2)').not(':last');
$.each($tds, function (i, el) {
var txt = $(this).find("input").val()
$(this).html(txt);
});
$(btnupdate).siblings("a").removeClass("btn-hidden");
$(btnupdate).addClass("btn-hidden");
},
//...
});
}
CSS style
.btn-hidden{
display:none;
}
Test Result
I am trying to fill the Datatable row content dynamically using Ajax Post. But it loaded the content at first shot correctly but when I try to fill content once again it returns error Can't instantiation Datatable. .
We refereed https://datatables.net/examples/data_sources/js_array.html For datatable row content.
Can Any one please help Us.
$.ajax({
url : SITE_ROOT_DIR+"ajaxFunction.php?Exportedinvoices=1&daterange="+daterange+"&fromDate="+fromDate+"&toDate="+toDate,
type : 'post',
cache : false,
success : function(data){
var message = JSON.parse(data);
var pLen,i;
pLen=message.length;
if(pLen>0){
var carter=[];var carterarr=[];
for(i=0;i<pLen;i++)
{
var company_name=message[i]['company_name'];
var salesOrderID=message[i]['salesOrderID'];
var salesOrderDate=message[i]['salesOrderDate'];
var product_code=message[i]['product_code'];
var quantity=message[i]['quantity'];
var deliveryDate=message[i]['deliveryDate'];
var ponuber=message[i]['ponuber'];
var TermsRefFullname=message[i]['TermsRefFullname'];
var ShipMethodFullName=message[i]['ShipMethodFullName'];
var SalesRepFullName=message[i]['SalesRepFullName'];
var ItemsalesTaxRefFullname=message[i]['ItemsalesTaxRefFullname'];
var CustomerMsgRefFullName=message[i]['CustomerMsgRefFullName'];
var val=company_name+'*'+salesOrderID+'*'+salesOrderDate+'*'+product_code+'*'+quantity+'*'+deliveryDate+'*'+ponuber+'*'+TermsRefFullname+'*'+SalesRepFullName+'*'+ShipMethodFullName+'*'+ItemsalesTaxRefFullname+'*'+CustomerMsgRefFullName;
var carterarr =carterarr+val+'#';
var carter=carterarr.slice(0, -1);
}
var arlene3 = carter.split("#");
var farray=[];var Aarray=[];var myarray=[];
for(var i=0;i<arlene3.length;i++){
var arraynow=arlene3[i];
Aarray=arraynow .split("*");
myarray.push(Aarray);
}
dataSet=myarray;
$('#example1').DataTable( {
destroy: true,
data: dataSet,
columns: [
{ title: "CustomerRefFullName" },
{ title: "InvoiceRefNumber" },
{ title: "TxnDate" },
{ title: "ItemRefFullName" },
{ title: "Quantity" },
{ title: "DueDate" },
{ title: "PoNumber" },
{ title: "TermsRefFullname" },
{ title: "SalesRepFullName" },
{ title: "ShipMethodFullName" },
{ title: "ItemsalesTaxRefFullname" },
{ title: "CustomerMsgRefFullName" },
],
"ordering": false,
"searching": false,
"paging": false,
"info": false,
} );
$('.tabheading').css("display","block");
}
else
{
alert("No datas found");
}
}
});
Here i'm trying Fuelux Tree used in Ace admin Template. I have used the same code they have used.
The script code used in ace admin template:
jQuery(function($) {
var tree_data = {};
var sampleData = initiateDemoData(tree_data); //see below
$('#tree1')
.ace_tree({
dataSource: sampleData['dataSource1'],
multiSelect: true,
cacheItems: true,
'open-icon': 'ace-icon tree-minus',
'close-icon': 'ace-icon tree-plus',
'selectable': true,
'selected-icon': 'ace-icon fa fa-check',
'unselected-icon': 'ace-icon fa fa-times',
loadingHTML: '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>'
});
function initiateDemoData(tree_data) {
tree_data = {
"2C27D744B956": {
"text": "2C27D744B956",
"children": {
"001B179F4400": {
"text": "9991100003333",
"type": "item"
},
"9991100003333": {
"text": "9991100003333",
"type": "item"
},
"2c27d744b956": {
"text": "9991100003333",
"type": "item"
},
"002170615A04": {
"text": "9991100003333",
"type": "item"
}
},
"type": "folder"
}
};
var dataSource1 = function(options, callback) {
var $data = null
if (!("text" in options) && !("type" in options)) {
$data = tree_data; //the root tree
callback({
data: $data
});
return;
} else if ("type" in options && options.type == "folder") {
if ("children" in options)
$data = options.children || {};
else
$data = {} //no data
}
if ($data != null) //this setTimeout is only for mimicking some random delay
setTimeout(function() {
callback({
data: $data
});
}, parseInt(Math.random() * 500) + 200);
//we have used static data here
//but you can retrieve your data dynamically from a server using ajax call
//checkout examples/treeview.html and examples/treeview.js for more info
}
return {
'dataSource1': dataSource1
}
}
});
Then on a button click i'm trying to refresh the tree, with new data from ajax Get request, But when i tried, an error comes in browser such as "Uncaught TypeError: Cannot read property 'apply' of undefined ".
Following is my ajax code:
$.ajax({
type : "GET",
url : "getDevices.htm?did=" + dID,
success : function(data) {
tree_data = data; //tree_data is the data used for the treeview
$('#tree1').tree('reload');
},
error : function(data) {
console.log("failure" + data);
}
});
Please suggest a method to resolve this issue.
Thanks in advance.
Is it possible for pagination last button reload in jquery datatable?
I have used jquery datable ,Now my record more than one lack's data.
So I have page initialize 1000 record load and then last pagination button click reload data 1000.
can give me any other idea...?
For your reference:
$("#tblExmaple").hide();
jQuery(document).ready(function ($) {
getRecords();
function getRecords() {
jQuery.support.cors = true;
$.ajax({
cache: false,
type: "GET",
url: "http://localhost:1111/TestSample/api/getRecords",
datatype: "json",
data: { Arg1: "Values1",Arg2: "Values2",Arg2: "Values3" },
statusCode: {
200: function (data) {
$.each(data, function (index, obj) {
var colRes1 = obj.Res1;
var colRes2 = obj.Res2;
var dataAdd = [colRes1, colRes2];
getData.push(dataAdd);
});
// Server Side Code
setTimeout(function () {
$('#tblExmaple').dataTable({
"sPaginationType": "full_numbers",
"sScrollXInner": "50%",
"sScrollyInner": "110%",
"aaData": getData,
"iDisplayLength": 8,
"sInfoEmpty": false,
"bLengthChange": false,
"aoColumns": [
{ "sTitle": "Column1" },
{ "sTitle": "Column2" }
];
})
}, 500);
setTimeout(function () {
$("#tblExmaple").show();
}, 500);
},
408: function (data) {
var response_Text = JSON.stringify(data, undefined, 50);
if (data.response_Text == undefined) {
window.location = "/Home/Index";
}
else {
timeoutClear();
}
}
}
});
}