javascript - Adding a link to datatables for more information - Stack Overflow

admin管理员组

文章数量:1425020

I have this code listing, i would like to add a link to datatables, I am getting an error: DataTables warning (table id = 'example'): Requested unknown parameter '3' from the data source for row 0, When i click ok, it does not load the link i have added, Here is my code

<script type="text/javascript" charset="utf-8">        
    $(document).ready(function() {
        var oTable = $('#example').dataTable( {
            "bProcessing": true,
            "sAjaxSource": "<?php echo base_url('operations/dataDisplayBanks/'); ?>",

            "aoColumns": [
                { "mData": "bank_id" },
                { "mData": "bank_name" },
                { "mData": "absolute_amount" },
                {
                    "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                        $('td:eq(3)', nRow).html('<?php echo base_url() ?>operations/display/' + aData[0] + '">' +
                            aData[0] + '</a>');
                        return nRow;
                    }
                },

            ]

        } );

    } );
</script>


<div id="demo">
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
        <thead>
            <tr>
                <th>Client ID</th>
                <th>Client Name</th>
                <th>Absolute Limit</th>  
                <th>History</th> 

            </tr>
        </thead>
        <tbody> 
        </tbody>
        <tfoot>

    </table>
</div>

I have this code listing, i would like to add a link to datatables, I am getting an error: DataTables warning (table id = 'example'): Requested unknown parameter '3' from the data source for row 0, When i click ok, it does not load the link i have added, Here is my code

<script type="text/javascript" charset="utf-8">        
    $(document).ready(function() {
        var oTable = $('#example').dataTable( {
            "bProcessing": true,
            "sAjaxSource": "<?php echo base_url('operations/dataDisplayBanks/'); ?>",

            "aoColumns": [
                { "mData": "bank_id" },
                { "mData": "bank_name" },
                { "mData": "absolute_amount" },
                {
                    "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                        $('td:eq(3)', nRow).html('<?php echo base_url() ?>operations/display/' + aData[0] + '">' +
                            aData[0] + '</a>');
                        return nRow;
                    }
                },

            ]

        } );

    } );
</script>


<div id="demo">
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
        <thead>
            <tr>
                <th>Client ID</th>
                <th>Client Name</th>
                <th>Absolute Limit</th>  
                <th>History</th> 

            </tr>
        </thead>
        <tbody> 
        </tbody>
        <tfoot>

    </table>
</div>

• javascript
• jquery
• datatable
• datatables

Share Improve this question Follow asked May 22, 2013 at 17:21 alphyalphy 1,00144 gold badges1414 silver badges2323 bronze badges 2

• Aren't you missing the opening a tag before echo base_url? – JayPea Commented May 22, 2013 at 17:37
• updated my answer with actual code – Jay Rizzi Commented May 23, 2013 at 20:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

EDIT i meant to say mRender is preferred for use over FnRowCallback on server-side implementations to create urls from data

here is an example using your code, add it and remove the FnRowCallback

  { "mData": null , //its null here because history column will contain the mRender
    "mRender" : function ( data, type, full ) {
    return '<a href="<?php echo base_url(); ?>operations/display/'+full[0]+'">'+full[0]+'</a>';}
  },

Docs: http://www.datatables/release-datatables/examples/advanced_init/column_render.html

You need an entry in aoColumns for the history property, that should solve there error you're seeing. Datatables expects a value for every column in the table, even if you plan on setting that value programmatically. I haven't found a way around this.

Also, your fnRowCallback shouldn't be a part of aoColumns. fnRowCallback should be part of the datatables configuration object (i.e., a peer of aoColumns).

Your config will look something like this:

{
    "bProcessing": true,
    "sAjaxSource": "<?php echo base_url('operations/dataDisplayBanks/'); ?>",
    "aoColumns": [
        { "mData": "bank_id" },
        { "mData": "bank_name" },
        { "mData": "absolute_amount" },
        { "mData": "history" } //need an entry here for history
    ],
    "fnRowCallback": function(nRow, aData, iDisplayIndex) {...}
}

Your data will look something like this:

[{
    "bank_id":1,
    "bank_name": "Fred's Bank",
    "absolute_amount": 1000,
    "history": ""
},
...
]

本文标签： javascriptAdding a link to datatables for more informationStack Overflow