说实话，在datatables里，我觉得这个回复挺重要的！https://datatables.net/forums/discussion/33723/new-user-help-columns-vs-columndefs-for-client-side-rendering-of-ajax-data
提问：
XML/HTML代码
- 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.
回答：
"columns" & "columnsDefs" ultimately serve the same purpose.
The differences being:
- "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
- 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：
XML/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>
JS关键代码：
JavaScript代码
- "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
- ]
看到这些定义，估计你应该能够想得出如何更好的应用了吧？
----EOF---
其他参考 ：