how to set jquery datatable cloumn width combine with a text-overflow.

If you wanna to cut the text in a column  some thing like:

td{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
Then you must set the table as </>
table.dataTable {
    table-layout: fixed;
}

And if you set table-layout:fixed, you can never use
"aoColumns": [
{ "sWidth": "20%" },
{ "sWidth": "15%" }, 
{ "sWidth": "20%" }, 
{ "sWidth": "15%" }, 
{ "sWidth": "5%" }, 
{ "sWidth": "5%" }, 
{ "sWidth": "10%" }, 
{ "sWidth": "5%" }, 
{ "sWidth": "5%"}
]
Because this is a dynamic setting for th,So you need add somthing like this:
     <colgroup>
        <col style="width:10%">
        <col style="width:20%">        
        <col style="width:15%">
        <col style="width:10%">
        <col style="width:10%">
        <col style="width:10%">
        <col style="width:5%">
        <col style="width:10%">
        <col style="width:5%">
        <col style="width:5%">  
     </colgroup>

before the <thead>

评论

  1. here is a datatable Wordpress integration tut. hope it will useful for someone...


    http://kvcodes.com/2014/02/sortable-data-table-wordpress-frontback-end/

    回复删除

发表评论

热门博文