Adding an empty column (at the left) ...

jdriesen · December 2014

Hi All,

I hope smb can help ... Struggling with this for a couple of hrs now ...

I'm trying to add an empty column to the left of a datatable ...
(later on ... an "edit" button will be placed in this column... )

Everything works fine, as long as I'm putting "data" in the left-most column.
As soon as I'm replacing the data-col (in this case... "ID" ... with data:null and defaultContent:'' ...
I get an AJAX error (see also JS source code...

Thanks in advance for your help !!!!

Regards,

Johnny
Belgium

My HTML Source ...

<html>
<head>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<title>Rooms</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">


<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
  
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>





<!-- DataTables JS -->

<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>

</head>
<body>
<div class="wrapper">
    <table id="example" class="display compact" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Action</th>
                <th>ID</th>
                <th>Name</th>
                <th>Description</th>
            </tr>
        </thead>
        
    </table>
</div>
</body>
</html>

My JS Code:

<script type="text/javascript">


    $('#example').DataTable( {
    serverSide: true,
    processing: true,
    start : 0,
    length : 5,
    PaginationType: 'full_numbers',
    lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, 'All']],
    
     columnDefs: [ 
            {
            "targets": 0,
            "data": "id",
            // My problem occurs when 
            // commenting the "data": = "id" line and uncommenting the 2 lines below, 
            // results in an AJAX error 
            
            // "data": null,
            // "defaultContent": '',
            },
            {
            "targets": 1,
            "data": "id"
            },
            
            {
            "targets": 2,
            "data": "name"
            },
            {
            "targets": 3,
            "data": "description"
            }           
        ],
    
    ajax: {
        url: 'http://localhost:8081/bs/rooms/datatable',
        type: 'POST'
    },
    
} );
</script>

In case it would help ...
this is my JSON data:

{"draw":0,"recordsTotal":6,"recordsFiltered":6,"data":[{"id":"1","name":"Room 01","description":"Descr 01"},{"id":"2","name":"Room 02","description":"Descr 02"},{"id":"3","name":"Room 03","description":"Descr 03"},{"id":"4","name":"Room 04","description":"Desc 04"},{"id":"5","name":"Room 05","description":"Descr 05"},{"id":"6","name":"Room 06","description":"Descr 06"}]}

Thanks !!

tangerine · December 2014

"defaultContent": '',

Remove the trailing comma.

jdriesen · December 2014

Hi Tangerine,

Thanks for your reply.
Unfortunatelly .. removing that trailing comma doesn't help ...

Strictly seen, that comma doesn't have to be there ...
but it ain't a problem for JS...
As you can see, there is also a trailing comma after "data":"id",

{
            "targets": 0,
            "data": "id",

and that works fine ...

jdriesen · December 2014

I did some further research, and it even becomes more weird ...
It seems that making column 1 the "empty" column, works fine... (targets: 1 )
But unfortunatelly, this ain't a solution ...

See code below... (this works fine)

<script type="text/javascript">
    $('#example').DataTable( {
    serverSide: true,
    processing: true,
    start : 0,
    length : 5,
    PaginationType: 'full_numbers',
    lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, 'All']],
    
     columnDefs: [ 
            {
            "targets": 0,
            "data": "id",
            },
            {
            // This works fine, but I want col1 to be the 'empty' col ...
            "targets": 1,
             "data": null,
             "defaultContent": 'def. content...',
                },
            
            {
            "targets": 2,
            "data": "name"
            },
            {
            "targets": 3,
            "data": "description"
            }           
        ],
    ajax: {
        url: 'http://localhost:8081/bs/rooms/datatable',
        type: 'POST'
    },
    
} );
</script>

Help appreciated !

allan · December 2014

Can you link to a test case so we can debug it live please.

// This works fine, but I want col1 to be the 'empty' col ...

It should work just fine using columns.defaultContent in the first column.

Thanks,
Allan

jdriesen · December 2014

Hi Allan,

Thanks for your reply ...

That's exactly what I tried (see my JS sourcecode on top of this page)... but unfortunatelly ... no luck ...

jdriesen · December 2014

Hi Allan,

Trying to setup a testcase ... but I'm not an expert in this matter ...
Working on it... (having a problem with adding my JSon data to the testcase ...)

Keep you posted

jdriesen · December 2014

I found a solution ...
**The trick: **... ** Filling column 0 with data, and making it invisible... **

Doing so, column 1 becomes the first "visible" one, and I can add non-data info ...
I agree ... not the most neat solution ...
Further investigation will be done later on ...

The code: (see comments in this code for solution)

$('#example').DataTable( {
    
    serverSide: true,
    processing: true,
    start : 0,
    length : 5,
    PaginationType: 'full_numbers',
    lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, 'All']],
    
     columnDefs: [ 
            {
            "targets": 0,
            "data": "id",          // This does the trick... Adding data ...
            "visible": false,      // And making this columns invisible ...
            "orderable" : false,
            "searchable": false,
            },
            {
             "targets": 1,        // By doing the trick above ...
             "data": null,        // this column becomes the first visible one ... (and no)
             "defaultContent": '',  // with no content ...
             "orderable" : false,
            "searchable": false,
            },
            
             {
             "targets": 2,
             "data": "id",
             "orderable" : false,
            "searchable": false,
             },
            
            {
            "targets": 3,
            "data": "name",
            "orderable" : true,
            "searchable": true,
            },
            {
            "targets": 4,
            "data": "description",
            "orderable" : true,
            "searchable": true,
            },
            {
            "targets": 5,
            "data": "studio_name",
            "orderable" : true,
            "searchable": true,
            }           
        ],
    ajax: {
        url: 'http://localhost:8081/bs/rooms/datatable',
        // dataSrc: MyJSon,
        datatype: 'json',
        type: 'POST'
    },

allan · December 2014

Good to hear you have a workaround. It shouldn't really be needed though. Here is a trivial example showing defaultContent being used in the first column.

Allan

jdriesen · December 2014

Hi Allan,

Thanks again for the great support.
Yep, seems to work now (I even changed your "columns" usage to columnDefs in combination with "target" ...
Evrt works fine ...

Only "difference I see is the AJAX url ... Maybe there is a mistake in the format of my JSon data ...

Can I kindly ask you give me the content of /data/objects.txt (don't know where to find this file)

Thanks in advance for your reply,

Have a great day,

Johnny

allan · December 2014

Can I kindly ask you give me the content of /data/objects.txt

It is linked in the source, you just gave most of the url ;-). http://live.datatables.net/ajax/objects.txt

Allan

jdriesen · December 2014

Seeing the problem now ....

My JSon data contains extra info (draw, recordsTotal, recordsFiltered ...)

{"draw":0,"recordsTotal":6,"recordsFiltered":6,"data":[{"id":"1","name":"Room 01","description":"Descr 01"},{"id":"2","name":"Room 02","description":"Descr 02"},{"id":"3","name":"Room 03","description":"Descr 03"},{"id":"4","name":"Room 04","description":"Desc 04"},{"id":"5","name":"Room 05","description":"Descr 05"},{"id":"6","name":"Room 06","description":"Descr 06"}]}

Grtz,

Johnny

Adding an empty column (at the left) ...

Adding an empty column (at the left) ...

Answers

Howdy, Stranger!

Categories

DataTables

Adding an empty column (at the left) ...

Adding an empty column (at the left) ...

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables