I am very new to Datatables and this might be simple, but surely I am missing something. I am trying to create a button column that uses the filename of each row and uses it to make an ajax call to display a picture on click. What I get wrong is that, every button of the column displays the same image, and not the image of the filename for each row. Here is the code:
$.ajax ({
url: "http:// ...... /Services/DBPrintDatatable?customer_id=" + projectid,
type: "GET",
dataType: 'json',
async: false,
success: function(data) {
$('#projectsdt').show();
projectsTable = $('#projectsdt').DataTable({
"pageLength": 10,
"data": data,
"scrollX": true,
"aaSorting": [],
"columns": [
{ "data": "upload_date" },
{ "data": "filename" },
{ "data": "uploader" },
{ "data": "upload_place" },
{ "data": "is_ok" },
{ "data": "custom_verdict" },
{
data: { "data": "filename" },
render: function ( data, type, row ) {
return "<a data-fancybox='gallery' class='btn btn-success' href='http://......./Services/DBShowImage?filename='+ { 'data': 'filename' }>Show</a>";
}
},
] ,
});
Thank you in advance!
If the image url required is like
http://......./Services/DBShowImage?filename=filenameFromData
Then you should generate it first inside the render like below code
href='http://......./Services/DBShowImage?filename="+ row.filename+"';
render: function ( data, type, row ) {
return "<a data-fancybox='gallery' class='btn btn-success' href='http://......./Services/DBShowImage?filename="+ row.filename+"'>Show</a>";
}
Related
I have this problem when trying to pass a string parameter from DataTable with Ajax to an ASP.NET MVC controller: the parameter is not being sent.
I tried many forms of "data:" options. Please help me, I think I'm missing something important.
When (as a test) I initialize the parameter at the beginning of the controller with ttt="CO" everything goes fine!
$('#tblVacation').DataTable({
"ajax": {
"url": '/Vacation/LoadData2',
"contentType": "application/json;charset=utf-8",
"type": 'GET',
"dataType": 'JSON',
"data" : ' { ttt: "CO" }'
"dataSrc": "",
},
"columns": [
{ "data": "vacationId", width: "5%" },
{ "data": "operatorId", width: "3%" },
{ "data": "operator", width: "10%" },
{ "data": "type", width: "3%" },
]
});
And the controller is:
[HttpGet]
public ActionResult LoadData2(string ttt)
// ttt="CO";
{
List<Vacation> data = null;
try
{
data = DB.Vacations.Include(x => x.Operator).ToList();
var result = data.Select(x => new Vacation_VM
{
VacationId = x.VacationId,
OperatorId = x.OperatorId,
Vacation_doc = x.Vacation_doc,
Operator = x.Operator.Name,
Type = x.Type,
}).Where(m => m.Type == ttt);
return new JsonResult(result);
}
catch (Exception ex)
{
ViewBag.Message = ex.Message;
}
return new JsonResult(null);
}
I also tried with
var entity = {
ttt: "CO"
}
var dataToSend = JSON.stringify(entity);
and
"data": function () {
return dataToSend;
},
but it's still not working. I will need in the future to pass multiple parameters.
Thanks a lot, I will appreciate any advice.
Replace the ajax call part with the followings:
"ajax": {
type: 'GET',
url: '/Vacation/LoadData2',
data: { ttt: "CO" },
dataType: 'JSON',
async: true,
cache: false,
},
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 am trying to get some data from an API and load into Datatables (datatable.net). I have completed the code as per guide and it doesn't load at all.
AJAX completes the request successfully.
Code below:
function loadTable(api) {
$.ajax({
url: api,
type: 'GET',
dataType: 'json',
"dataSrc": "",
beforeSend: function () {
console.log('\"Data collection\" query operation triggered')
$(".overlay").show(); //We are showing loading spinner here
},
headers: { Authorization: 'Basic XXXX },
success: function (data, textStatus, xhr) {
//Populate Table
$('#datatable').DataTable({
"columns": [
{ "data": "DataObjectName" },
{ "data": "SourceObject" },
{ "data": "IndnexType" },
{ "data": "ObjectType" },
{ "data": "FeedType" },
{ "data": "BusinessUnit" },
{ "data": "VersionId" },
{ "data": "Unit" },
{ "data": "Unit" },
],
"bDestroy": true
})
console.log('\"Data collection\" query operation succesfully completed');
},
error: function (xhr, textStatus, errorThrown) {
console.log('\"Data collection\" query operation failed. Error : ' + errorThrown);
showNotification('top', 'right', 'Error while performing ' + operation + '. Error : ' + errorThrown, 'danger');
},
complete: function () {
$(".overlay").hide(); //We are showing loading spinner here
console.log('\"Data collection\" query operation task completed');
}
});
}
How to add action buttons in frontend vue.js when using server side dataTables?
here is what i have so far, this code is working, but action buttons not give the request when clicking. (the alert is not also firing). the action buttons are showing and calling to editTaxGroup()
$(document).ready(function() {
let tax = 1;
self.dataTable = $("#tax_groups2").DataTable({
serverSide: true,
ajax: {
"columns": [
{ "data": "tax_group_name" },
{ "data": "country.country_name" },
{ "data": "tax_rate_percentage" },
{ "data": "Edit" },
{ "data": "Delete" }
],
data: {
"token": localStorage.getItem("token"),
},
url: 'api/v1/get-tax-groups',
dataFilter: function(data){
var json = jQuery.parseJSON( data );
json.recordsTotal = 100;
json.recordsFiltered = 100;
self.tax_groups = data.data;
return JSON.stringify( json ); // return JSON string
}
},
columns: [
{data: "tax_group_name"},
{data: "country.country_name",},
{data: "tax_rate_percentage"},
{data: "Edit"},
{data: "Delete"},
],
"columnDefs": [
{
"targets": [ -2 ],
"data":"id",
"defaultContent" : '<i class="fas fa-pen"></i>'
},
{
"targets": [ -1 ],
"data":"id",
"defaultContent" : '</i>'
}
],
});
})
$('#tax_groups2 tbody ').on('click', '#edit', function () {
for (let key in self.tax_groups){
alert(1)
console.log(key);
if(self.tax_groups.hasOwnProperty(key)){
console.log(`${self.tax_groups[key]}`)
}
}
} );
});
},
This isn't using Vue at all. You could actually more efficiently use Vue to generate these tables dynamically and set buttons as well. You may want to remove the Vue tag or re-ask the question.
I am using yajra datatables:
var table = $("#dt_user_draw").DataTable({
destroy: true,
processing: true,
responsive: true,
serverSide: true,
ordering: false,
"ajax": {
"method": "GET",
"url": 'url'
},
"columns": [
{
"data": "user"
},
{
"data": "email"
},
{
"data": "registered_at",
},
{
"render": function (data, wea, row) {
return '<i v-on:click="showDrawUser" class="nav-icon far fa-eye fa-fw " aria-hidden="true" title="Ver Draw"></i>';
}
},
]
});
In the last row, add v-on:click but this is not working. I do not how to do to vue render after datatables load