How to set width columns using datatables.net
How to set width columns using datatables.net
chibao2704
Posts: 3Questions: 1Answers: 0
table = $('#listemployee').DataTable(
{
scrollY : "300px",
scrollX : "100%",
scrollCollapse : true,
ajax : {
"url" : "/master/ps9040/getpagingemployee",
"type" : "POST"
},
processing : true,
serverSide : true,
paging : true,
searching : false,
"bAutoWidth" : false,
"columns" : [
{
"title" : '',
data : "EmployeeCorp",
render : function(data, type, row) {
return '<input value='
+ data
+ ' type="checkbox" class="call-checkbox">';
},
// "class" : "checkboxtables"
}, // check box
{
"title" : _text['552'],
"data" : "EmployeeCorp",
"sWidth" : "200px",
render : function(data, type, row) {
var split = data.split('-');
return '<label class="labelEmployeeId" id="'
+ split[0]
+ '" value='
+ split[0]
+ ' corpid="'
+ split[1]
+ '" branchid="0" >'
+ split[0] + '</label>';
},
"class" : "test"
},
{
"title" : _text['553'],
"data" : "EmployeeName",
"class" : "test"
},
{
"title" : _text['554'],
"data" : "EmployeeKana",
"class" : "test"
},
{
"title" : _text['555'],
"data" : "EmployeeShort",
"class" : "test"
},
{
"title" : _text['556'],
"data" : "CorpName",
"class" : "test"
},
{
"title" : _text['557'],
"data" : "DepartName",
"class" : "test"
},
{
"title" : _text['558'],
"data" : "PositionName"
},
{
"title" : _text['559'],
"data" : "ManagerId"
},
{
"title" : _text['560'],
"data" : "ManagerName",
},
{
"title" : _text['561'],
"data" : "NewcomeDate",
},
{
"title" : _text['562'],
"data" : "QuitDate",
},
{
"title" : _text['563'],
"data" : "Email",
render : function(data, type, row) {
return '<a>' + data + '</a>';
}
},
{
"title" : _text['564'],
"data" : "Country",
},
{
"title" : _text['565'],
"data" : "Price",
},
{
"title" : _text['566'],
"data" : "Note","class" : "test1"
},
{
"title" : _text['567'],
"data" : "Working",
render : function(data, type, row) {
return data == 0 ? _text['570']
: _text['571'];
}
},
{
"title" : "11111111",
"data" : "DelFlag",
render : function(data, type, row) {
var value = data.split(':');
if (value[0] == 0) {
return '<button id="btnDTEdit" value='
+ value[1]
+ ' type="button" class="btn btn-default editButton"> '
+ _text['572']
+ '</button>'
+ '<button id="btnDTDelete" value='
+ value[1]
+ ' type="button" class="btn btn-default deleteButton"> '
+ _text['503']
+ '</button>';
} else {
return '<button id="btnDTRestore" value='
+ value[1]
+ ' type="button" class="btn btn-default btnDTRestore"> '
+ _text['574']
+ '</button>'
+ '<button id="btnDTDeletePhyscial" value='
+ value[1]
+ ' type="button" class="btn btn-default btnDTDeletePhyscial"> '
+ _text['575']
+ '</button>';
}
},
"class" : "center"
}, {
"title" : "9999",
"data" : "DelFlag_1",
} ] ,
"language" : {
"lengthMenu" : _text['544'] + " _MENU_ ",
"zeroRecords" : _text['545'],
"info" : String.format(_text['583'], " _PAGE_",
"_PAGES_"),
"infoEmpty" : _text['545'],
"infoFiltered" : "(filtered from _MAX_ total records)",
"paginate" : {
"previous" : _text['548'],
"next" : _text['549']
}
}
});
new $.fn.dataTable.FixedColumns(table, {
leftColumns : 2
});
this my code set in datatable , but the width of columns not set
Please help me
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Can you link to the page please, as per the forum rules. Using
columns.widthshould be enough, but the browser can override if it thinks the assigned width is in error (that's just how table layout in browsers work).Allan
This my code demo
http://jsfiddle.net/617tom96/
In leftcolumn: I want to fix width. But it auto
Please help me
The simple fact is that the content you want to show in the first column cannot be shown in 20px width. Therefore the browser overrules you.
If you want to truncate the data, you can put a
divelement into the cell and set its width and addoverflow: hiddento its CSS properties.Allan
Thankyou very much to @allan
I did it