I am using datatables and I populate the table with data using javascript. It works fine but I would like to prevent datables from resizing the table's column width after filtering. I have tried several solutions found on the web but it does not seem to solve the issue.
My HTML is:
<table class="table table-striped table-bordered table-hover" id="id-table" width="100%"></table>
I instantiate the table like:
var table = $('#id-table').DataTable(
{
paging: false,
ordering: false,
info: false,
"bAutoWidth": false, // Disable the auto width calculation : false,
columns: columns,
data : assignments,
sScrollX: "100%",
// aoColumns : aoColumns
// aoColumns : [
// { "sWidth": "150px" },
// { "sWidth": "150px" },
// { "sWidth": "150px" },
// { "sWidth": "150px" },
// { "sWidth": "150px" },
// { "sWidth": "150px" },
// { "sWidth": "150px" },
// { "sWidth": "150px" },
// { "sWidth": "150px" },
// { "sWidth": "150px" },
// { "sWidth": "150px" },
// { "sWidth": "150px" }
// ]
// aoColumns: aoColumns
// columnDefs : cdefs
}
);
where data is an array with the data and columns is an array of objects such as:
bSearchable false
sTitle "Column Title"
sWidth "100px"
title "Column Title"
mRender function(data, type, full, meta)
render function(data, type, full, meta)
I have tried setting the width in both "columns" directly and using the "aoColumns" options (commented out in the code above). In both cases, columns widths still get resized after filtering. Any idea on how I can disable this auto-resizing?
In your html table tag set style table-layout to 'fixed' and pass bAutoWidth = false to datatable function
I had this problem with the current version of DataTables (v1.10.16) and it was because I set autoWidth to false without understanding what it does.
In the default configuration (CSS table-layout: auto + DataTables' autoWidth: true) the columns are appropriately sized based on the data and do not jump when filtering.
Related
I am working on datatable and facing this error :
DataTables warning: table id=table - Requested unknown parameter '0'
for row 0, column 0.
I have studied this link and it says that my table column defines in HTML doesn't match with the columns received from server. BUT in my case both are same.
Here is my HTML code :
<table id="table" class="display responsive nowrap" cellspacing="0" width="100%">
<thead style="background-color:#303641;">
<tr>
<th>aNumber</th>
<th>bNumber</th>
<th>cellID</th>
<th>dateTime</th>
<th>duration</th>
<th>imei</th>
<th>imsi</th>
<th>operatorId</th>
<th>mscId</th>
<th>fileId</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Datatable javascript code :
var dataTable = $('#table').DataTable({
"processing": true,
"serverSide": true,
"bFilter": false,
"iDisplayLength": configData,
dom: 'Bfrtip',
buttons: ['colvis', 'print', 'csv', 'excel', 'pdf'],
searching: false,
language: {
buttons: {
colvis: 'Show/Hide Columns'
}
},
"ajax": {
url: "getAdvanceCallAnalysisData.json",
data: function(d) {
return $.extend({}, d, {
"offset": 0,
"newRequest": newReq,
"totalRecords": total,
"lookInCol": "aNumber",
"lookInVal": "43543543",
"fromDate": from_date,
"toDate": to_date,
"callingCellId": "",
"CalledCellId": "",
"cdrType": "",
"smsType": "",
"durationFilter": "",
"selectColumns": "",
"sortCol": "",
"sortType": "",
});
},
type: "POST",
error: function() {
alert("error");
},
complete: function(data) {
total = data.responseJSON.recordsTotal;
newReq = 0;
test(total, newReq);
$("#loading_image").hide();
$(".show_datatable").show();
},
"aoColumns": [{
"mData": "aNumber"
}, {
"mData": "bNumber"
}, {
"mData": "cellID"
}, {
"mData": "dateTime"
}, {
"mData": "duration"
}, {
"mData": "imei"
}, {
"mData": "imsi"
}, {
"mData": "operatorId"
}, {
"mData": "mscId"
}, {
"mData": "fileId"
}]
}
});
you can see that my columns name and numbers match with the columns define in ajax response.
I have done same thing for another table and it was working fine but it shows error here. don't know why !!
json response : (It returns 15 records, I posted only two just to make it short)
{"msg":null,"code":null,"status":null,"data":[{"aNumber":"343","bNumber":"3434","cellID":"410-01-831-14770","dateTime":"2017-08-23 17:27:54.0","duration":419,"imei":"22380831696837","imsi":"35340311428389","operatorId":4,"mscId":"5","fileId":"4"},{"aNumber":"3434","bNumber":"5656","cellID":"410-07-1314-28271","dateTime":"2017-08-23 22:02:15.0","duration":785,"imei":"49776303943255","imsi":"35722667519554","operatorId":1,"mscId":"2","fileId":"5"}],"draw":1,"limit":1000,"recordsFiltered":12,"recordsTotal":12}
The most funny part is it shows the correct records and pagination even it display correct rows (with empty data) in datatable. This ajax call returns 15 records. Please see the image below :
Any idea, what is wrong here ?
In my MVC project I have implemented JQuery datatables to retrieve data.I am using 1.9.4 jquery.dataTables.js. I have three filters to restrict the output in the table. Two of which works perfectly. However on the third option which suppose to show all records I receive "Undefined" pop up alert. I tried both in IE and Google chrome.
#{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Call log";
}
<link rel="stylesheet" href="~/Scripts/datatables/css/jquery.dataTables.css" />
<script type="text/javascript" src="~/Scripts/datatables/JS/jquery.js"></script>
<script type="text/javascript" src="~/Scripts/datatables/JS/jquery.dataTables.js"></script>
<script src="~/Scripts/jquery-ui.min.js"></script>
<script src="~/Scripts/json2.js"></script>
<script src="~/Scripts/json2.min.js"></script>
<script type="text/javascript">
$(function () {
GetUsers(1);
$('#select-filter').change(function () {
GetUsers($(this).val());
});
});
function GetUsers(filter) {
$.ajax({
url: '/home/GetAllUsers',
type: "POST",
cache: false,
data: JSON.stringify({ filter: filter }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (idata) {
DisplayDataTables(idata.aaData);
return;
},
error: function (idata) {
alert(idata.msg);
}
});
}
function DisplayDataTables(aDataSet) {
$('#divBRUsers').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="tbl-users"></table>');
$('#tbl-users').DataTable({
"sPaginationType": "full_numbers",
"aaData": aDataSet,
"aoColumns": [
{
"sTitle": "Customer ID",
"sClass": "center",
"sName": "Employee ID",
"fnRender": function (oObj) {
return '' + oObj.aData[0] + '';
}
},
{ "sTitle": "Customer Name", "sClass": "left" },
{ "sTitle": "Customer Address", "sClass": "left" },
{ "sTitle": "Customer City", "sClass": "left" },
{ "sTitle": "Contacted Before", "sClass": "left" }
//{ "sTitle": "Campaign Name", "sClass": "center" }
]
});
}
</script>
<h2>#ViewBag.Title.</h2>
<div class="row">
<div class="div-add-campaign-form">
Filter <select class="dtSearch" id="select-filter">
<option value="1">Assigned to me</option>
<option value="2">Associated with my branch</option>
<option value="3">View all</option>
</select>
</div>
<div id="divBRUsers">
Please wait, loading data...
</div>
</div>
All right, consider the following object for your jquery dataTable instantiation:
var conf = {
columnDefs : [ { className : '...' }, targets : { 3, 6, 7} ],
columns: [
[ title : 'product id' ],
[ title : 'product name' ]
],
data : [
[ 23, "Cellular" ] // nested array, pay attention to the number of values added, 2 values, by order: productId, productName
],
order: [[0,'desc']], // first column set to desc, add a new value in the array to apply multi-order, values order matters!!
destroy : !0,
pageLength : 10,
paging : !0, // full number pagination is set as default
responsive : !0,
bSort : !0,
bSortable : !0,
bFilter : !1,
autoWidth : !1
};
As you can see, simply the object defines a table for apparently 2 columns 'productId', 'productName'; Adjust that to fit your case where it's gonna be a matter of adding values to the columns array, any extra config you wanna add to the columns you will have to add it to the columnDefs (short for columnDefinitions).
Remember, you will keep receiving errors similar to the one reported if the set of data doesn't match the columns. Make sure each nested array in the data array have the same number of values as for the columns, read the comments for more details. if for any reason, your data doesn't match that order, you gonna have to change that order manually, force empty values with '-' or 'n/a' values so all nested arrays have the same logic of values.
I hope this helps.
Good luck.
I got one problem, the page button of my datatables out of line. I used SB admin templates (bootstrap). I tried to edit my datatables function, but it's not working. I tried to JSFiddle in this function but its not work to.
My datatables's button
I want my datatables like this :
I want like this
I tried to edit my function, and this is my datatables's function :
<script>
$('#datatables').dataTable
({
"sScrollX": "200%", //This is what made my columns increase in size.
"bScrollCollapse": true,
"sScrollY": "800px",
"bAutoWidth": false,
"aoColumns": [
{ "sWidth": "5%" }, // 1st column width
{ "sWidth": "null" }, // 2nd column width
{ "sWidth": "70%" }, // 3rd column width
{ "sWidth": "null" }, // 4th column width
{ "sWidth": "null" }, // 5th column width
{ "sWidth": "40%" }, // 6th column width
{ "sWidth": "null" }, // 7th column width
{ "sWidth": "null" }, // 8th column width
{ "sWidth": "null" }, // 9th column width
{ "sWidth": "35%" }, // 10th column width
{ "sWidth": "35%" }, // 11th column width
{ "sWidth": "null" }, //12
{ "sWidth": "null" }, //13
{ "sWidth": "null" }, //14
{ "sWidth": "null" }, //15
{ "sWidth": "null" }, //16
{ "sWidth": "15%" } //17
],
"bPaginate": true,
"sDom":'<"H"lCfr>t<"F"ip>',
//"sDom": '<"search"f><"top"l>rt<"bottom"ip><"clear">',
"sPaginationType":"full_numbers",
"aaSorting":[[0, "asc"]],
"bJQueryUI":true
});
</script>
I tried to edit my sDom but it's not work to. I used codeigniter framework for this project. Please help.
Thanks.
You can change data tables "sDom" options to use bootstrap class so that it fits the page width. You can try also by changing grid class combination like col-md-3,col-md-3 and col-md-6 or any other :
{
"sDom": '<<"col-md-4"f><"col-md-4"l><"col-md-4"i>><trp>'
}
OR
{
"sDom": '<<"col-md-3"f><"col-md-3"l><"col-md-6"i>><trp>'
}
In the below code I have a jQuery DataTable and I want to get selected row ids and store it into array. But I get only one row id SchoolID but I want to get SchoolID, ClassID and SectionID for checked checkbox.
var val[]; //global
"aoColumns": [
{
"mDataProp": "SchoolID",
"bSearchable": false,
"bSortable": false,
"sWidth": "10%",
"mRender": function(data, type, full) {
val = '<input type="checkbox" id="chkSchoolID" onclick="CheckRow(' + full.SchoolID + ')"></button>';
return val;
}
},
{
"mDataProp": "SchoolID",
"sWidth": "25%"
}, {
"mDataProp": "ClassID",
"sWidth": "25%"
}, {
"mDataProp": "SectionID",
"sWidth": "25%"
},
],
function CheckRow() {
alert(val);
}
Here is the js code that I use. I want to have column 2 sorted in descending order by default.
when I disable bserverside to be false, I get this working (but it does not show all the records when I click next page).
However, if I enable bserverside:true, I get the what I have shown below in the image. if I remove "aaSorting", but keep bserverside:true, it displays all records on pagination. but the records are not sorted and clicking the sort button on the column header does not sort. Moreover, sorting on other columns (which I have included in aocolumns) produce the same image. I cannot figure out what is going wrong. I spent entire weekend trying to figure this out. but have not made any progress yet
$(document).ready(function() {
var oTable = $('#search_table').dataTable( {
"sDom": 'T<"clear">lrtip',
"bProcessing": true,
//"bServerSide": true,
"sAjaxSource": "{% url 'search_list_json' %}",
"aaSorting": [ [2,"desc" ]],
"iDisplayLength":10,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sClass": "center", "sWidth": "15%","bSortable": false },
{ "sClass": "center", "sWidth": "5%","bSortable": true },
{ "sClass": "center", "sWidth": "5%","bSortable": true },
{ "sClass": "center", "sWidth": "5%" ,"bSortable": true },
{ "sClass": "center", "sWidth": "5%","bSortable": false}
]
} );
} );
Following code is working for me
$(document).ready(function() {
var dataTable = $('#employee_data').DataTable({
"processing": true,
"serverSide": true,
"aaSorting": [ [0,"desc" ]],
"ajax": {
url: "$urlOne",
type: "post",
error: function()
{
alert('error');
}
}
});