Hello I have a button when clicked on , removes a row from the datatable and then redraws itself. I've tried this but it reverts my datatable to default settings while removing the row:
var tbl;
$(document).ready(function() {
tbl = $('#myTable').DataTable({
"bLengthChange": false,
"bFilter": false,
"iDisplayLength": 5,
"columns": [{
"width": "50%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}],
"responsive": true,
"retrieve": true
});
});
function delete()
tbl.rows($(this).parents('tr')).remove().draw();
}
I've tried this too and I get the same result:
function delete()
$('#myTable').DataTable().rows($(this).parents('tr')).remove().draw();
}
And also I tried including reinitializing the table but I get an error
function delete() {
var tbl = $('#myTable').DataTable({
"bLengthChange": false,
"bFilter": false,
"iDisplayLength": 5,
"columns": [{
"width": "50%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}],
"responsive": true,
"retrieve": true
});
tbl.rows($(this).parents('tr')).remove().draw();
}
What is the right way to do this?
You have some typos in your code and I haven't seen the HTML... but anyways, here's a working example: http://jsbin.com/quhologaba/1/edit
code snippet:
$(document).ready(function() {
var tbl = $('#myTable').DataTable({
"bLengthChange": false,
"bFilter": false,
"iDisplayLength": 5,
"responsive": true,
"retrieve": true
});
$('#myTable tbody').on( 'click', '.remove', function () {
alert('clicked');
console.log(tbl);
tbl.row( $(this).parents('tr') ).remove().draw();
} );
});
Related
I am trying to add data dynamically in datatable.I have initialized table on document.ready and created an instance of it.After that, I am trying to add data in the table using instance.
$(document).ready(function() {
//Initialize tooltips
table_sgdFile_list_linked = $('#sgdFile_list_linked').DataTable({
bSort: false,
destroy:true,
bLengthChange: false,
pageLength: 4,
columns: [{
title: "Name"
},
{
title: "Action"
}
]
});
});
I am trying to bind the data
table_sgdFile_list_linked.data(dataSet)
but it is not working.
my_list = $('#my-table-html-id').DataTable( {
"processing": true,
"serverSide": false,
"paging": true,
"bLengthChange" : true,
"bFilter": false,
"pageLength": 10,
"info": false,
"ordering": true,
"ajax": "PATH-OF-MY-API",
"columnDefs": [
{
"render": function ( data, type, row ) {
var html = data + " Modified!";
return html;
},
"orderable": false,
"targets": 1 //Last column
},
],
})
you can try this:
to add 1 row: table_sgdFile_list_linked.row.add(rowJson).draw();
to add multiple rows: table_sgdFile_list_linked.rows.add(rowsJson).draw();
following worked for me :
table_sgdFile_list_linked.clear().draw();
$('#sgdFile_list_linked').dataTable().fnAddData(trHTML);
So I'm using DataTables with the scrollX parameter set to true, however it's causing the thead columns to collapse.
Note: the datatable is appearing inside a Bootstrap Modal as part of a react project.
How can I resolve this?
When I click on one of the columns, causing it to refresh, it fixes itself. Also, if I remove the scrollX it also doesn't collapse.
Initialisation code:
$('#item-search').DataTable( {
ajax: {
"data": {
type: "map_items",
map_id: this.map_id
},
"dataSrc": (r) => {
console.log(r);
return r.data;
},
type: "POST",
url: "src/php/search.php"
},
autoWidth : false,
columns: [
{
"data": "brand"
},
{
"data": "name"
},
{
"data": "quantity"
},
{
"data": "measurement"
},
{
"data": "type"
},
],
dom: 'rtlip',
language: {
"info": "Showing page _PAGE_ of _PAGES_",
"infoFiltered": ""
},
lengthMenu: [ 1, 2, 3 ],
pageLength: 1,
processing: true,
responsive: true,
scrollX: true,
select: {
style: "multi"
},
serverSide: true
});
In data table initialization include following property.
autoWidth : true
Along with add this
"fnInitComplete": function(oSettings) {
$( window ).resize();
}
"fnDrawCallback": function(oSettings) {
$( window ).trigger('resize');
}
DataTable should be initialized with the following code to achieve horizontal scrolling:
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,
"fixedColumns": {
"leftColumns": 1
}
This work in my angular project
this.dtTarifas = {
scrollX: true,
autoWidth: false,
lengthChange: false,
responsive: false
}
I have in my package.json "angular-datatables": "7.0.0"
$('#DataTableID').DataTable({
//"scrollX": true,
"initComplete": function (settings, json) {
$("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
},
});
Trying to stop display of certain params into datatable.
Already used Info: false. However still the datatable shows Showing 0 to 0 of 0 entries.
Here is the JavaScript code:
$(document).ready(function() {
$('#cli').addClass('hide');
$('.users8').addClass('activetab');
var oTable = $("#bugtable").dataTable({
"bLengthChange": false,
"Info" : false,
"paging":false,
"aoColumnDefs": [{
"bSortable": false,
"aTargets": [-1]
}],
"autoWidth": false,
"columns": [{
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}]
});
$('#addfor').keyup(function() {
oTable.search($(this).val()).draw();
});
});
Set the property sEmptyTable in oLanguage when setting your table to an empty string:
var oTable= $('#bugtable').dataTable({
"oLanguage": {
"sEmptyTable": ""
}
// Other table setup options
}
In the below code I am getting the return value using AJAX and now I want to filter the values. My return value looks like this:
"ProductID":1 ,
"ProductName": Salt
I want only the ProductName. Please help me to do this.
function LoadProducts() {
var LocationID = $('#<%= ddlLocations.ClientID %>').val();
var ProductTypeID = $('#<%= ddlProductTypes.ClientID %>').val();
$("#product").dataTable({
"oLanguage": {
"sZeroRecords": "No records to display",
"sSearch": "Search"
},
"aLengthMenu": [[10, 25, 50, 100, 150, 250, 500, -1], [10, 25, 50, 100, 150, 250, 500, "All"]],
"iDisplayLength": 10,
"bSortClasses": false,
"bStateSave": false,
"bPaginate": true,
"bAutoWidth": false,
"bProcessing": true,
"bServerSide": false,
"bDestroy": true,
"sAjaxSource": "ProductsNew.aspx/GetProducts",
"bJQueryUI": true,
"sPaginationType": "simple",
"bDeferRender": true,
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "POST",
"url": sSource,
"data": "{'vLocationID': '" + LocationID + "','vProductTypeID': '" + ProductTypeID + "'}",
"success":
function (msg) {
var json = jQuery.parseJSON(msg.d);
window.localStorage.setItem("Productlist", msg.d);
fnCallback(json);
$("#product").show();
}
});
},
"aoColumns": [
{ "mDataProp": "Location", "sWidth": "125px" },
{ "mDataProp": "ProductCode", "sWidth": "100px" },
{ "mDataProp": "ProductName", "sWidth": "125px" },
{ "mDataProp": "ProductTypeName", "sWidth": "125px" },
{ "mDataProp": "CurrentStock", "sWidth": "50px" },
{ "mDataProp": "UnitType", "sWidth": "50px" },
{ "mDataProp": "ProductID" },
{ "mDataProp": "LocationID" },
{
"mDataProp": "ProductID", "bSearchable": false, "bSortable": false, "sWidth": "40px",
"mRender": function (data, type, full) {
var str = '<button type="button" id="btnEdit" onclick="openMyModal(\'ProductDetails.aspx?ProductID=' + full.ProductID + '&LocID=' + full.LocationID + '\')">Edit</button>';
return str;
}
}
],
"columnDefs": [
{
"visible": false, "targets": 6
},
{
"visible": false, "targets": 7
},
{
"sClass": "relative-postition-and-break-word"
}
]
});
}
I'm using the datatables plugin and it's working fine for me. However, I'm making multiple calls to populate multiple tables, when I know I could make one AJAX call and store the results in a variable and have each table function use that variable for its data, but I can't get it to work.
I'm using something like to to get the data I need.
var all_data;
$.ajax({
async : false,
url: 'all_data.php',
type: 'GET',
success: function(data) {
all_data = data;
console.log(all_data);
}
})
The idea is to pass all_data variable into my table function (I have several on this one page) without having to make multiple calls. Doing the following returns one column with the letter "a", which isn't right. The data that comes back is JSON coded. I've used the below code, but with the AJAX function as part of the table function:
$("#my_table").DataTable({
"data":all_data
,
"paging": true,
"sDom": '<"top">t<"bottom"><"clear">',
"pageLength": 50,
"order": [[ 4, "desc" ]],
"aoColumns": [
{ "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "","visible":false },
{ "bSortable": true, "searchable": false, "width": "10%", "sClass": "lang_body_2 table_names", "sTitle": "" },
{ "bSortable": true, "searchable": false,"width": "20%", "sClass": "lang_body_2", "sTitle": "Database","visible":false},
{ "bSortable": true, "searchable": false ,"width": "20%","sClass": "lang_body_2","sTitle": "National Average","visible":false },
{ "bSortable": true, "searchable": false ,"width": "50%","sClass": "lang_body_2 index_num table_index","sTitle": "" },
],
"columns": [
{ "searchable": true },
{ "searchable": false },
{ "searchable": false },
{ "searchable": false },
{ "searchable": false },
],
"search": {
"search": "gen"
},
"columns": [
{ "width": "20%" },
null,
null,
null,
{ "width": "80%" },
],
"initComplete": function(settings, json) {
colorIndex();}
});
});
What am I doing wrong here? I'm suspecting I have to prepare all_data somehow, but I'm not sure what that might be.
EDIT: If I console.log the data returned, this is what I get (cut off for brevity):
Object {draw: 0, recordsTotal: 484, recordsFiltered: 484, data: Array[484]}
data: Array[484]
[0 … 99]
0: Array[5]
0: "edu"1: "High School"2: "37.90"3: "49.70"4: "76"length: 5
Your code looks fine, the only thing you need to do is
Assign your datatable to a variable and then in your ajax resolve clear, add data and draw the table.
var all_data;
$.ajax({
async : false,
url: 'all_data.php',
type: 'GET',
success: function(data) {
all_data = data;
console.log(all_data);
table.clear().row.add(all_data).draw(); //clear, add data and draw
}
});
// Assign your datatable to a variable
var table = $("#my_table").DataTable({
"data":all_data
,
"paging": true,
"sDom": '<"top">t<"bottom"><"clear">',
"pageLength": 50,
"order": [[ 4, "desc" ]],
"aoColumns": [
{ "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "","visible":false },
{ "bSortable": true, "searchable": false, "width": "10%", "sClass": "lang_body_2 table_names", "sTitle": "" },
{ "bSortable": true, "searchable": false,"width": "20%", "sClass": "lang_body_2", "sTitle": "Database","visible":false},
{ "bSortable": true, "searchable": false ,"width": "20%","sClass": "lang_body_2","sTitle": "National Average","visible":false },
{ "bSortable": true, "searchable": false ,"width": "50%","sClass": "lang_body_2 index_num table_index","sTitle": "" },
],
"columns": [
{ "searchable": true },
{ "searchable": false },
{ "searchable": false },
{ "searchable": false },
{ "searchable": false },
],
"search": {
"search": "gen"
},
"columns": [
{ "width": "20%" },
null,
null,
null,
{ "width": "80%" },
],
"initComplete": function(settings, json) {
colorIndex();}
});
});