手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜Qcloud , 注册 | 登陆

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

首页 > Javascript >

 说实话,在datatables里,我觉得这个回复挺重要的!https://datatables.net/forums/discussion/33723/new-user-help-columns-vs-columndefs-for-client-side-rendering-of-ajax-data

 
提问:
XML/HTML代码
  1. Hi,  
  2.   
  3. 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.  
  4.   
  5. My questions are:  
  6. 1. Would I use columns.render, or columnDefs.render?  
  7. 2. Do I need both columns and columnDefs?  
  8. 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?  
  9. 4. How do I use "targets"? Does "targets" refer to the column in the displayed table, or the column under "columns"?  
  10.   
  11. 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:

  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:
XML/HTML代码
  1. <th class="actionsCol no-print">Actions</th>  
  2. <th class="StatusCol">Status</th>  
  3. <th class="IsFinalCol">Final<br>Plan</th>  
  4. <th class="VrsnCol">Vrsn</th>  
  5. <th class="CutCntCol">Cut<br>Cnt</th>  
  6. <th class="CarCntCol">Car<br>Cnt</th>  
JS关键代码:
JavaScript代码
  1. "columnDefs": [  
  2.                {  
  3.                     // This is for the Action column icons  
  4.                     "targets"'actionsCol',  
  5.                     "sorting"false,  
  6.                     "orderable"false,  
  7.                     "type":"html",  
  8.                     "width""8%",  
  9.                     className: "dt_nowrap_col no-print",  
  10.                     "render"function (data, type, row) {  
  11.                         return $.jqote(yv.templates.action_icons, data);  
  12.                     }  
  13.                 },  
  14.                 {  
  15.                     "targets": ['IsFinalCol','CutCntCol','CarCntCol','VrsnCol','StatusCol'],  
  16.                     "width""5%"  
  17.                 },  
  18. etc  
  19. ]  
 
看到这些定义,估计你应该能够想得出如何更好的应用了吧?
----EOF---
 
其他参考 :
https://datatables.net/reference/option/columns.render#Examples
 



本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

« 上一篇 | 下一篇 »

发表评论

评论内容 (必填):