mRender problem: unable to form link to folder contents

cachiap · March 2015

Allan, I'm having a problem using nRender and I'm not sure what I am missing since I have used this property before and it worked perfectly. I am obviously missing something critical. Here is a link to the page where the problem occurs

www.paulandkirk.com/Debolt/data/ClientPages/DataTables/DataTables-1.10.4/extensions/Editor-1.3.3/examples/inline-editing/ClientInventory_join.html

Here the Product names are highlighted but when you hover the url shows the .pdf file is undefined.

This same approach works well on the following link

www.paulandkirk.com/Debolt/data/ClientPages/DataTables/masterInventory.html

Here is the code on the problem page:

www.paulandkirk.com/Debolt/data/ClientPages/DataTables/DataTables-1.10.4/extensions/Editor-1.3.3/examples/inline-editing/ClientInventory_join.html

Here is the code on the page causing the problem:

www.paulandkirk.com/Debolt/data/ClientPages/DataTables/DataTables-1.10.4/extensions/Editor-1.3.3/examples/inline-editing/ClientInventory_join.html

Note

The 2nd return statement in mRender is commented out as it refers to the location on my laptop.
When the page loads choose page 6 to get past those entries that are "null". The null entries are the result of deletions in some of the other tables referred to in the join.

'''

cachiap · March 2015

Allan here is the code from the problem pag

'''
<!DOCTYPE html>
<html>
<head>

    <script type="text/javascript" language="javascript" class="init">

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {

            // Setup - add a text input to each header cell (to change to footer: use 'tfoot th' and change the search application below
            //                                                "table.column( colIdx ).footer()")

    $('#ClientInventoryJoin thead th').each( function () {
        var title = $('#ClientInventoryJoin thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder=" '+title+'" />' );
    } );



editor = new $.fn.dataTable.Editor( {

    table: "#ClientInventoryJoin",
    fields: [  

                       {
            label: "Filename",
            name: "product_name.pdffilename"
        }, {
            label: "Product",
            name: "product_name.pdfprodname"
        }, {
            label: "Manufacturer",
            name: "product_name.pdfmanufacturer"
        }, {
                            label: "Client:",
            name: "client.clientname"
        }, {
            label: "Location:",
            name: "location.locname"
        }, {
            label: "Expires",
            name: "product_name.pdfexpiredate"
        }, {
            label: "Cntrld",
            name: "product_name.pdfcontrolled"
        } 

    ]
} );



    var table = $('#ClientInventoryJoin').DataTable( { 

    ajax: {
                    url: "../php/serverSideClientInventory_join.php",
                    type: 'post'
                   },


            "serverSide": true,

            "processing": true,

            // This block sets up the links in the Product Name column.                

            "aoColumnDefs": [ {
            "aTargets": [ 1 ], // Column to target
            "mRender": function ( data, type, full ) {
             // 'full' is the row's data object, and 'data' is this column's data
             // e.g. 'full[0]' is the comic id, and 'data' is the comic title
             return '<a href="Http://www.paulandkirk.com/Debolt/data/PDFFiles/' + full[0] + '">' + data + '</a>';
             //return '<a href="../../../../../../../PDFFiles/ ' + full[0] + ' ">  '+ data +'  </a>';
           }
         }

       ],

            "scrollY": "400px",

            "scrollCollapse": true,

    "dom": 'T<"clear"><"top"lfi>rt<"bottom"p><"clear">',





            "lengthMenu": [100, 25, 50], 

    columns: [ 

                    { data: "product_name.pdffilename", target: 0 },
                    { data: "product_name.pdfprodname", target: 1 },
                    { data: "product_name.pdfmanufacturer", target: 2 },                        
        { data: "client.clientname", target: 3 },
        { data: "location.locname", target: 4 },                        
                    { data: "product_name.pdfexpiredate", target: 5 },
                    { data: "product_name.pdfcontrolled", target: 6 }

    ],

    order: [[ 2, 'asc' ], [ 1, 'asc' ]],


    tableTools: {
        sRowSelect: "os",
        sRowSelector: 'td:first-child',
        aButtons: [
            { sExtends: "editor_create", editor: editor },
            { sExtends: "editor_edit",   editor: editor },
            { sExtends: "editor_remove", editor: editor }
        ]
    }
} );


   // Apply the search (to apply to footer use "table.column( colIdx ).footer()")


table.columns().eq( 0 ).each( function ( colIdx ) {
    $( 'input', table.column( colIdx ).header() ).on( 'keyup change', function () {
        table
            .column( colIdx )
            .search( this.value )
            .draw();
    } );
} );

} );

</script>

</head>

       <div>

<a class="" href="#" style="position: relative;
text-decoration: none;
float: right; /* Added float-right /
display: inline-block;
margin-right: 3em; /Changed from 3px to 3em /
padding: 5px 8px;
border: 1px solid #c1c1c1;
cursor: pointer;
/cursor: hand;*/
font-size: 0.88em;
color: black !important;

-webkit-border-radius: 2px;
   -moz-border-radius: 2px;
    -ms-border-radius: 2px;
     -o-border-radius: 2px;
        border-radius: 2px;

-webkit-box-shadow: 1px 1px 3px #ccc;
   -moz-box-shadow: 1px 1px 3px #ccc;
    -ms-box-shadow: 1px 1px 3px #ccc;
     -o-box-shadow: 1px 1px 3px #ccc;
        box-shadow: 1px 1px 3px #ccc;">Back</a>

   </div>

    <section>
        <h1>Client/Location/Product Search</h1>



        <table id="ClientInventoryJoin" class="display compact" cellspacing="0" width="100%">
            <thead>
                <tr>

                                            <th>Filename</th>
                                            <th>Product</th>
                                            <th>Manufacturer</th>
                    <th>Client</th>
                    <th>Location</th>   
                                            <th>Expires</th> 
                                            <th>Cntrld</th>

                </tr>
            </thead>


        </table>

            </section>

</body>
</html>

allan · March 2015

Hi,

From the code you are trying to access the data as an array (full[0]), but the data is in object form, not an array. So you probably want something like full. product_name.pdffilename.

Allan

cachiap · March 2015

Thanks, that was the answer.

I read the information on ColumnDefs and mRender but I didn't pick up any clues as to how to solve the problem. I was not sure what was wrong since the full[0] was working on my other page as the example showed it would. I was assuming it would read the data from the column with index 0 and apply the information in the cell to the link in column index 1. This is the scenario that runs on my other page.

allan · March 2015

I was not sure what was wrong since the full[0] was working on my other page as the example showed it would

You must have been using arrays as a data source for your other table. This manual page might be useful.

I was assuming it would read the data from the column with index 0 and apply the information in the cell to the link in column index 1.

full is the original data source object for the row though. It is not an array if you use an object for the row, which you are in this case.

I'll make some changes to the documentation to improve the description of that in the columns.render option.

Allan

mRender problem: unable to form link to folder contents

mRender problem: unable to form link to folder contents

Replies

Howdy, Stranger!

Categories

DataTables

mRender problem: unable to form link to folder contents

mRender problem: unable to form link to folder contents

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables