DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

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

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

jdriesenjdriesen Posts: 8Questions: 1Answers: 0
edited December 2014 in Free community support

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 !!

Answers

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    "defaultContent": '',

    Remove the trailing comma.

  • jdriesenjdriesen Posts: 8Questions: 1Answers: 0
    edited 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 ...

  • jdriesenjdriesen Posts: 8Questions: 1Answers: 0
    edited 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 !

  • allanallan Posts: 63,692Questions: 1Answers: 10,500 Site admin

    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

  • jdriesenjdriesen Posts: 8Questions: 1Answers: 0
    edited 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 ...

  • jdriesenjdriesen Posts: 8Questions: 1Answers: 0
    edited 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

  • jdriesenjdriesen Posts: 8Questions: 1Answers: 0
    edited 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'
    },
  • allanallan Posts: 63,692Questions: 1Answers: 10,500 Site admin

    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

  • jdriesenjdriesen Posts: 8Questions: 1Answers: 0

    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

  • allanallan Posts: 63,692Questions: 1Answers: 10,500 Site admin

    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

  • jdriesenjdriesen Posts: 8Questions: 1Answers: 0

    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

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.