Zend Framework2 and Javascript
<p>I have a Zend Framework 2 View in which i have some php code and some javascript code. Is there a possibility that i can put the javascript code into a different file and include that file in my php code. Please let me know. here's my javascript code....</p>

<pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;

            /* Formating function for row details */
            function fnFormatDetails ( oTable, nTr )
            {
                var aData = oTable.fnGetData( nTr );
                var sOut = '&lt;table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;"&gt;';
                sOut += '&lt;tr&gt;&lt;td&gt;File Type:&lt;/td&gt;&lt;td&gt;'+aData[2]+' '+aData[4]+'&lt;/td&gt;&lt;/tr&gt;';
                sOut += '&lt;tr&gt;&lt;td&gt;Status:&lt;/td&gt;&lt;td&gt;'+aData[4]+'&lt;/td&gt;&lt;/tr&gt;';
                sOut += '&lt;tr&gt;&lt;td&gt;Download link:&lt;/td&gt;&lt;td&gt;&lt;a href=""&gt;'+aData[3]+'&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;';
                sOut += '&lt;/table&gt;';

                return sOut;
            }

            /* Default class modification */
            $.extend( $.fn.dataTableExt.oStdClasses, {
                "sSortAsc": "header headerSortDown",
                "sSortDesc": "header headerSortUp",
                "sSortable": "header"
            } );

            /* API method to get paging information */
            $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
            {
                return {
                    "iStart":         oSettings._iDisplayStart,
                    "iEnd":           oSettings.fnDisplayEnd(),
                    "iLength":        oSettings._iDisplayLength,
                    "iTotal":         oSettings.fnRecordsTotal(),
                    "iFilteredTotal": oSettings.fnRecordsDisplay(),
                    "iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
                    "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
                };
            }

            /* Bootstrap style pagination control */
            $.extend( $.fn.dataTableExt.oPagination, {
                "bootstrap": {
                    "fnInit": function( oSettings, nPaging, fnDraw ) {
                        var oLang = oSettings.oLanguage.oPaginate;
                        var fnClickHandler = function ( e ) {
                            if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
                                fnDraw( oSettings );
                            }
                        };

                        $(nPaging).addClass('pagination').append(
                            '&lt;ul&gt;'+
                                '&lt;li class="prev disabled"&gt;&lt;a href="#"&gt;&amp;larr; '+oLang.sPrevious+'&lt;/a&gt;&lt;/li&gt;'+
                                '&lt;li class="next disabled"&gt;&lt;a href="#"&gt;'+oLang.sNext+' &amp;rarr; &lt;/a&gt;&lt;/li&gt;'+
                            '&lt;/ul&gt;'
                        );
                        var els = $('a', nPaging);
                        $(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
                        $(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
                    },

                    "fnUpdate": function ( oSettings, fnDraw ) {
                        var oPaging = oSettings.oInstance.fnPagingInfo();
                        var an = oSettings.aanFeatures.p;
                        var i, sClass, iStart, iEnd, iHalf=Math.floor(oPaging.iTotalPages/2);

                        if ( oPaging.iTotalPages &lt; 5) {
                            iStart = 1;
                            iEnd = oPaging.iTotalPages;
                        }
                        else if ( oPaging.iPage &lt;= iHalf ) {
                            iStart = 1;
                            iEnd = 5;
                        } else if ( oPaging.iPage &gt;= (5-iHalf) ) {
                            iStart = oPaging.iTotalPages - 5 + 1;
                            iEnd = oPaging.iTotalPages;
                        } else {
                            iStart = oPaging.iPage - Math.ceil(5/2) + 1;
                            iEnd = iStart + 5 - 1;
                        }

                        for ( i=0, iLen=an.length ; i&lt;iLen ; i++ ) {
                            // Remove the middle elements
                            $('li:gt(0)', an[i]).filter(':not(:last)').remove();

                            // Add the new list items and their event handlers
                            for ( i=iStart ; i&lt;=iEnd ; i++ ) {
                                sClass = (i==oPaging.iPage+1) ? 'class="active"' : '';
                                $('&lt;li '+sClass+'&gt;&lt;a href="#"&gt;'+i+'&lt;/a&gt;&lt;/li&gt;')
                                    .insertBefore('li:last', an[i])
                                    .bind('click', function () {
                                        oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
                                        fnDraw( oSettings );
                                    } );
                            }

                            // Add / remove disabled classes from the static elements
                            if ( oPaging.iPage === 0 ) {
                                $('li:first', an[i]).addClass('disabled');
                            } else {
                                $('li:first', an[i]).removeClass('disabled');
                            }

                            if ( oPaging.iPage === oPaging.iTotalPages-1 ) {
                                $('li:last', an[i]).addClass('disabled');
                            } else {
                                $('li:last', an[i]).removeClass('disabled');
                            }
                        }

                    }
                }
            } );

            $(document).ready(function() {
                /*
                 * Insert a 'details' column to the table
                 */

                var nCloneTh = document.createElement( 'th' );
                var nCloneTd = document.createElement( 'td' );
                nCloneTd.innerHTML = '&lt;img src="media/images/details_open.png"&gt;';
                nCloneTd.className = "center";


                $('#dashboard thead tr').each( function () {
                    this.insertBefore( nCloneTh, this.childNodes[0] );
                } );

                $('#dashboard tbody tr').each( function () {
                    this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
                } );

                /*
                 * Insert a checkbox column
                 */

                var nCloneTh1 = document.createElement( 'th' );
                var nCloneTd1 = document.createElement( 'td' );
                nCloneTd1.innerHTML = '&lt;input type="checkbox" id="select"/&gt;';
                nCloneTd1.className = "center";


                $('#dashboard thead tr').each( function () {
                    this.insertBefore( nCloneTh1, this.childNodes[1] );
                } );

                $('#dashboard tbody tr').each( function () {
                    this.insertBefore(  nCloneTd1.cloneNode( true ), this.childNodes[1] );
                } );

                /*
                 * Initialse DataTables, with no sorting on the 'details' column
                 */
                var oTable = $('#dashboard').dataTable( {
                    "sDom": "&lt;'row'&lt;'span8'l&gt;&lt;'span8'f&gt;r&gt;t&lt;'row'&lt;'span8'i&gt;&lt;'span8'p&gt;&gt;",
                    "sPaginationType": "bootstrap",
                    "aoColumnDefs": [
                        { "bSortable": false, "aTargets": [ 0 ] }
                    ],
                    "aaSorting": [[1, 'asc']]           
                });


                /* Add event listener for opening and closing details
                 * Note that the indicator for showing which row is open is not controlled by DataTables,
                 * rather it is done here
                 */
                $('#dashboard tbody td img').live('click', function () {
                    var nTr = $(this).parents('tr')[0];
                    if ( oTable.fnIsOpen(nTr) )
                    {
                        /* This row is already open - close it */
                        this.src = "media/images/details_open.png";
                        oTable.fnClose( nTr );
                    }
                    else
                    {
                        /* Open this row */
                        this.src = "media/images/details_close.png";
                        oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
                    }
                } );

            } );
        &lt;/script&gt;
</code></pre>
