schedule_Open_Datatable = $("#make_schedule_open_table").DataTable({
columnDefs: [
{ className: "control", orderable: false, targets: 1, width: "5%" },
{ orderable: false, targets: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11] }
],
responsive: {
details: {
type: "column",
target: 1,
},
},
//scrollX: true,
buttons: ["copy", "csv", "excel", "pdf", "print", "colvis"],
sPaginationType: "full_numbers",
ajax: {
url: SODUrl,
// our data is an array of objects, in the root node instead of /data node, so we need 'dataSrc' parameter
dataSrc: "",
},
columns: columns,
rowReorder: { dataSrc: "seq" },
order: [[0, 'asc']],
dom: "<'row'<'col-sm-6'B><'col-sm-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-4'l><'col-sm-4'i><'col-sm-4'p>>",
select: "single",
//ordering: false,
createdRow: function (row, data, dataIndex) {
$(row).attr("data-id", data.id);
},
The colvis button exists on the page but it doesn't want to show the column any of the columns , i have all the links that was required , i tried using the example used on the bootstrap 4 page but still doesnt work.
Related
For example, in the following code I receive the records from a DB and I need to set the value of the targets: 1 to a variable to print it in other areas of the screen.
tableRefacciones = $('#lstRefacciones').DataTable({
dom: 'Bfrtip',
ajax: {
url: 'almacenes/salidas_caja_detalle.ajax.php',
dataSrc: ""
},
columnDefs: [
{
targets: 1,
visible: false
},
{
targets: 3,
visible: true,
render: $.fn.dataTable.render.number(',', '.', 2, '')
},
{
targets: 4,
visible: false,
}
I need to set the value of the targets: 1 to a variable to print it in other areas of the screen.
I add json data in database like this (in database column social):
{"twitter":"test","instagram":"test1","linkedin":"test2"}
for show result in datatables:
var tableUser = $('#table-user').DataTable({
dom: 'rt<"card-footer"<"row" <"col-md-6"i> <"col-md-6"p>>>',
processing: true,
serverSide: true,
autoWidth: false,
order: [
[1, 'asc']
],
ajax: {
url: '<?= route_to('admin/user/manage') ?>',
method: 'GET'
},
columnDefs: [{
orderable: false,
targets: [0, 4, 5]
}],
columns: [
{
'data': function(data) {
return data.social
},
}
]
});
Result is(return data.social):
{"twitter":"test","instagram":"test1","linkedin":"test2"}
In action I need to specific value like: twitter or instagram. How to show this result?!
I would like to access the dropdown list for length display of the jQuery Datatable before the data is loaded in the table, i have a problem that whenever the user select the lenght of records to display in the table , the table resize and trigger window.resize() and i want to access the dropdown list after the table initialization but before the data is loaded, here is what i trying to do but it doesn't work.
let table = $('#data-table').DataTable();
$(document).on('preInit.dt', function (e, settings)
{
$('select[name=data-table_length]').click(function ()
{
console.log('dropdown selected');
window_resize = false;
});
});
table = $('#data-table').DataTable({
destroy: true,
serverSide: false,
autoWidth: false,
paging: true,
order: [[1, 'asc']],
searching: true,
stateSave: true,
scrollX: true,
lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
ajax: {
url: '/Observer/GetActiveClientsByProfileId',
type: 'POST',
data: {
ProfileId: profileId
},
dataSrc: ''
},
columns: [
{
title: 'Zone',
data: 'LastKnownZone',
},
{
]
});
I want add class to td when get list data by ajax
Default my code html
<tr>
<td>#fisrt.System_Code.Code</td>
<td>#fisrt.System_Code.Caption</td>
<td class="text-success">#string.Format("{0:N0}", maden)</td>
<td class="text-danger">#string.Format("{0:N0}", den)</td>
<td class="text-warning nrt-bd" dir="ltr">#string.Format("{0:N0}", maden - den)</td>
</tr>
When i want get list data after filtering , i dont know how to add class
$.ajax({
type: 'GET',
url: '/Record_Professor/Search_Budget/',
data: { from: from, to: to },
success: function (results) {
results.forEach(function (item) {
$('#table_id').dataTable().fnAddData([
item.Code,
item.Caption,
item.Maden,
item.Daeen,
item.Balance
]);
});
},
error: function (error) {
alert('error; ' + eval(error));
}
});
"className": "Classname", is used to add class at run time
$('#table_id').DataTable({
data: data2,
"autoWidth": false,
deferRender: true,
pageLength: 10,
responsive: true,
scrollCollapse: true,
select: {
style: 'os',
selector: 'td:first-child'
},
"lengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
"columnDefs": [{
"className": "Classname",
"targets": [5,2,3,4,9,]
}]
});
$('#example').dataTable( {
"columnDefs": [
{ className: "my_class", "targets": [ 3 ] }
]
} );
I used the datatables jquery plugin to display a list which is loaded using an ajax call to the server.
I used the bFilter property in order to hide the filter because I want to put the search input inside my sidebar.
$(function () {
var generatedCustomerTable = $('#ItemsTable').DataTable({
"order": [[0, "desc"]],
"bSort": true,
processing: true,
serverSide: true,
ajax: {
url: "/api/Ajax/Test",
method: "POST",
},
columns: [
{ visible: false, data: "id" },
{ orderable: false, data: "name" },
{ orderable: false, data: "value" },
],
bLengthChange: false, // Hide the page size
bFilter: false, // Hide the search box
ordering: true,
paging: true,
pagingType: "full_numbers",
pageLength: 10,
language: {
paginate: {
first: '«',
previous: '‹',
next: '›',
last: '»'
},
aria: {
paginate: {
first: 'First',
previous: 'Previous',
next: 'Next',
last: 'Last'
}
}
}
});
$("#btnTest").click(function () {
// I WANT HERE TO SET THE FILTER
generatedCustomerTable.draw();
});
});
I want programmatically to set the filter text but I have not found a way to do it.
Is there some kind of function which will allow me to set the filter value so that I will be able to call the .draw() method in order to refresh the contents of the list.
In your code , By setting the bFilter to false will not only hide the search box but it'll disable also the search function from the dataTable ,
In order to create your own custom search box , you have to enable the bFilter, and then either hide the default search control with css (recommended ) by setting :
.dataTables_filter {
display:none;
}
, or you make your own table rendering using sDom | other link
See below Snippet :
var dataSet = [
[ 1, "Name 1","one" ],
[ 2, "BRimos", "JS" ],
[ 3, "pitaridis","Data" ],
[ 4, "Stack", "overflow" ],
[ 5, "Name 2","two" ],
[ 6, "Name 3","three" ],
[ 7, "Name 4","one" ],
[ 8, "BRimos 2", "JS" ],
[ 9, "pitaridis 2","Data" ],
[ 10, "Stack 2", "overflow" ],
[ 11, "Name 5","two" ],
[ 12, "Name 6","three" ]
];
$(function () {
var generatedCustomerTable =$('#ItemsTable').DataTable( {
"order": [[0, "desc"]],
"bSort": true,
data: dataSet,
columns: [
{ visible: false,title: "id" },
{ orderable: false,title: "name" },
{ orderable: false,title: "value" }
],
bLengthChange: false, // Hide the page size
bFilter: true, // Hide the search box
ordering: true,
paging: true,
pagingType: "full_numbers",
pageLength: 5,
language: {
paginate: {
first: '«',
previous: '‹',
next: '›',
last: '»'
},
aria: {
paginate: {
first: 'First',
previous: 'Previous',
next: 'Next',
last: 'Last'
}
}
}
} );
$("#btnTest").click(function () {
console.log($("#filter").val(),generatedCustomerTable);
generatedCustomerTable
.search($("#filter").val()).draw();
});
});
.dataTables_filter {
display:none;
}
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<input id="filter" type="text" />
<button id="btnTest">search</button>
<table id="ItemsTable" width="100%"></table>