New user help: columns vs. columnDefs for client side rendering of AJAX data

edhalsim

Hi,

I'm a beginner with DataTables. I'm trying to use DataTables AJAX to pull records from the server (an ASP.NET MVC app.) Each record coming from the server has name, address line 1, address line 2, city, state, zip. I want my table to combine and format all those fields into one column on the client.

My questions are:
1. Would I use columns.render, or columnDefs.render?
2. Do I need both columns and columnDefs?
3. Do I need to specify either the table column name (e.g., NameAndAddress) in "columns", or do I need to list each field coming back from the server?
4. How do I use "targets"? Does "targets" refer to the column in the displayed table, or the column under "columns"?

Thanks for your help. I've been though the documentation a few times and I'm still confused about columns vs. columnDefs.

jr42.gordon

"columns" & "columnsDefs" ultimately serve the same purpose.

The differences being:

1. "columns" requires you to provide a configuration or null for all columns. "columnDefs" requires you to only proved configuration for columns that have "special" configurations
2. I have found "columns" best used if handling array of strings as your rows. I have found "columnDefs" best used if handling objects as your rows

"targets" takes a single string or int value, or array of previous two to denote which columns this configuration is for. I suggest using column class instead of column # in the event you want to use ColReorder extension.

Here are examples of how I have configured columns in my application.

HTML

<th class="actionsCol no-print">Actions</th>
<th class="StatusCol">Status</th>
<th class="IsFinalCol">Final<br>Plan</th>
<th class="VrsnCol">Vrsn</th>
<th class="CutCntCol">Cut<br>Cnt</th>
<th class="CarCntCol">Car<br>Cnt</th>

Script

"columnDefs": [
               {
                    // This is for the Action column icons
                    "targets": 'actionsCol',
                    "sorting": false,
                    "orderable": false,
                    "type":"html",
                    "width": "8%",
                    className: "dt_nowrap_col no-print",
                    "render": function (data, type, row) {
                        return $.jqote(yv.templates.action_icons, data);
                    }
                },
                {
                    "targets": ['IsFinalCol','CutCntCol','CarCntCol','VrsnCol','StatusCol'],
                    "width": "5%"
                },
etc
]

edhalsim

Thanks. This helped. I got it working by leaving off "columns" entirely and using "columnDefs" with render functions for each table column targeting to the class as you showed above.

jr42.gordon

Cool. I prefer "columnDefs" as I find it more flexible and powerful. Especially when using ColReorder.