Add button row for plugin JQuery DataTables

Question

I am using the plugin "DataTables" and I'm wanting to add an image by line, that when the user clicks, call another url.

I followed the examples of www.datatables.net but is giving the below error:

DataTables warning (table id = 'myDataTable'): Requested unknown parameter '4' from the data source for row 0.

Records are shown on the screen

<h2>Index</h2>

<script type="text/javascript">
    $(document).ready(function () {

        var oTable = $('#myDataTable').dataTable({
            "bServerSide": true,
            "sAjaxSource": "AjaxHandler",
            "bProcessing": true,
            "sPaginationType": "full_numbers",   
            "aoColumns": [
                        { "mDataProp": "ID", "bSortable": false },
                        { "mDataProp": "Nome", "sTitle": "Identificação do produto" },
                        { "mDataProp": "Address", "sTitle": "Descrição do produto" },
                        { "mDataProp": "Town" },
                        { "fnRender": function (o) {return '<a href=/Produto/Detalhar/' + o.aData[0] + '>' + 'More' + '</a>';}} 
            ],
        });
    });
</script>


<table id="myDataTable" class="display">
    <thead>
        <tr>
            <th>ID</th>
            <th>Company name</th>
            <th>Address</th>
            <th>Town</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody> 
    </tbody>
</table>

Daniele Armanasco · Accepted Answer · 2013-11-21 15:09:26Z

5

I'm using dataTables version 1.10.0-dev and the accepted solution does not work for me, because o.aData is undefined. Instead I have all the properties of the json objects that I'm returning server side in o. So this is my solution:

$(document).ready(function () {
    var oTable = $('#myDataTable').dataTable({
        "bServerSide": true,
        "sAjaxSource": "AjaxHandler",
        "bProcessing": true,
        "sPaginationType": "full_numbers",
        "aoColumns": [
            { "mData": "ID", "bSortable": false },
            { "mData": "Nome", "sTitle": "Identificação do produto" },
            { "mData": "Address", "sTitle": "Descrição do produto" },
            { "mData": "Town" },
            {
                "mData": null,
                "bSortable": false,
                "mRender": function (o) { return '<a href=/Produto/Detalhar/' + o.Id + '>' + 'More' + '</a>'; }
            }
        ]
    });
});

I don't know if this depends on the new version of dataTables or from others configurations (but my table is configured in the same manner ...).

answered Nov 21, 2013 at 15:09

Daniele Armanasco

7,47110 gold badges46 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tiedt Tech Over a year ago

Hi, this code is work this url flexgestor.com.br/CA, and dataTable version is 1.9.4 @Daniele Armanasco

A. Wolff · Accepted Answer · 2013-04-15 16:41:38Z

I don't really know datatable (not enough), but you should try this way: {not sure mDataProp is deprecated or not}

$(document).ready(function () {

        var oTable = $('#myDataTable').dataTable({
            "bServerSide": true,
            "sAjaxSource": "AjaxHandler",
            "bProcessing": true,
            "sPaginationType": "full_numbers",   
            "aoColumns": [
                        { "mData": "ID", "bSortable": false },
                        { "mData": "Nome", "sTitle": "Identificação do produto" },
                        { "mData": "Address", "sTitle": "Descrição do produto" },
                        { "mData": "Town" },
                        {   "mData": null,
                    "bSortable": false,
            "mRender": function (o) {return '<a href=/Produto/Detalhar/' + o.aData[0] + '>' + 'More' + '</a>';}
            }   
            ]
        });
    });

Be sure your data feet with you column declaration, you should have as ajax response a json with datas ID, Nome, Address and Town. If your first data is id not ID, you would get an error i think.

Collectives™ on Stack Overflow

Add button row for plugin JQuery DataTables

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related