StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There are a bunch of ways to do this. Here's one. Now, for the sample code it might be important to note that my data is coming into "aaData" as a 3D object as opposed to a 2D array. I don't know for sure that mDataProp or even aoColumns is available to 2D data.</p> <p>2D (<strong>not</strong> what I am using):</p> <pre><code>['column1', 'column2', 'column3'], ['moreColumn1', 'moreColumn2', 'moreColumn3] &hellip; etc &hellip; </code></pre> <p>3D (<strong>this</strong> is what I am using):</p> <pre><code>[{'key1': 'column1', 'key2': 'column2', 'key3': 'column3'}, {'key1': 'moreColumn1', &hellip; etc &hellip;}] </code></pre> <p>To add a column with a widget, you just need to be using aoColumns, and create an entry with an mDataProp of null. You can add a class to it (as a hook for a JavaScript function) and add any other default content (such as one or more edit icons, text, or whatever):</p> <pre><code>"aoColumns": [ { "mDataProp": null, "bSortable": false, "sClass": "editControl", "sDefaultContent": '<span class="editIcon"></span>' }, { "mDataProp": "key1" }, { "mDataProp": "key2" }, { "mDataProp": "key3" } ] </code></pre> <p>In this example, the icon is added as the background image of a span class (CSS not shown). There are other ways to accomplish the goal, and I agree with an earlier poster that you may want to just send a "placeholder" column. This will definitely work with a 2D array. If you are going to use a placeholder column, you're treading into the "mixing concerns" territory, but if it's blank then it might be a worthwhile tradeoff.</p> <p>If that's the way you go, I would add the images, etc. in the fnRowCallback.</p> <pre><code>"fnRowCallback": function( nRow, aData ) { // let's imagine we are sending a URL in one of the columns and we want it to // be stored in a clickable first column. var theLink = aData[1]; $('td:eq(0)', nRow).addClass('clickable editIcon').attr('href', theLink); return nRow; } </code></pre> <p>Again, the icon itself would be created as a background-image, in this case for the TD element. You could use <code>.html()</code> and add whatever markup you want, though, enabling you to use image elements instead. It's just an example... not all browsers support href as a property of a td. But hopefully it gives the right idea as a starting point.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload