ngcp-panel/share/templates/helpers/datatables.tt

[%
    IF helper.dt_columns;
        helper.column_titles = [];
        helper.column_fields = [];
        FOR col IN helper.dt_columns;
            NEXT UNLESS col.title;
            helper.column_titles.push(col.title);
            helper.column_fields.push(col.accessor);
        END;
    END;
    backuri = c.req.uri;
    tmp = backuri.query_param_delete('back');
-%]

<script src="/js/libs/bootstrap/datatables-paging.js"></script>
<script src="/js/libs/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">

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

$(document).ready(function() {
	var [% helper.name.remove('[\s+\.]') %]_table = $('#[% helper.name.remove('[\s+\.]') %]_table')
	    .dataTable( {
        "sDom": "<'row-fluid ngcp_dt_top_elements'lf<r>>t<'row-fluid'<'pull-left'i><'pull-right'p>>",
        "bProcessing": true,
        "bServerSide": true,
        "bPaginate": [% helper.paginate || 'true' %],
        "bFilter": [% helper.filter || 'true' %],
        "sPaginationType": "bootstrap",
        [% IF helper.length_change %]
            "bLengthChange": true,
            "aLengthMenu": [5, 10, 25, 50],
        [% ELSE %]
            "bLengthChange": false,
        [% END %]
        "bSort": true,
        "bInfo": true,
        "iDisplayLength": 5,
        'iShowPages': 5,
		"sAjaxSource": "[% helper.ajax_uri %]",
        [% IF helper.column_sort -%]
            "aaSorting": [
            [% 
                FOR f IN helper.column_fields;
                    IF helper.column_sort == f; 
            -%]
                [ [% loop.index %], "asc" ],
            [%
                    END;
                END;
            -%]
            ],
        [% END -%]
		"aoColumns": [
		    [% FOREACH f IN helper.column_fields -%]
		    { "mData": "[% f %]" },
		    [% END -%]
		    {   "mRender": function ( data, type, full ) {
                    var html = '' +
                    '<div class="sw_actions pull-right">';
                    [% FOR button IN helper.dt_buttons -%]
                      [% confirm_delete = button.name == "Delete" ? 'data-confirm="Delete"' : '' -%]
                      [% confirm_delete = button.name == "Terminate" ? 'data-confirm="Terminate"' : confirm_delete -%]
                      [% IF button.condition -%]
                        if([% button.condition %]) {
                      [% END -%]
                        html +=
                           '<a class="btn [% button.class %]" href="[% button.uri %]?back=[% backuri | uri %]" [% confirm_delete %]>' +
                              '<i class="[% button.icon %]"></i> [% button.name %]' +
                            '</a>';
                      [% IF button.condition -%]
                        }
                      [% END -%]
                    [% END -%]
                    html += '</div>';
                    return html;
                },
                "mData": null,
                "bSortable": false,
                "sClass": "ngcp-actions-column"
            }
		],
		"fnDrawCallback": function( oSettings ) {
                $('.sw_actions').css('visibility','hidden');
                $('.sw_action_row').hover(
                    function() { $(this).find('.sw_actions').css('visibility','visible'); },
                    function() { $(this).find('.sw_actions').css('visibility','hidden'); }
                );
        },
        "fnRowCallback": function(nRow, aData, iDisplayIndex) {
            nRow.className = "sw_action_row";
            return nRow;
        },
	} );

    [% has_from = 0; has_to = 0; -%]
    [% FOR col IN helper.dt_columns -%]
      [% IF col.search_from_epoch && !has_from -%]
        var f = '<label>From Date: <input type="text" id="[% helper.name.remove('[\s+\.]') %]_datepicker_start" class="ngcp-datepicker" rel="tooltip" data-original-title="YYYY-MM-DD"/></label>';
        $('#[% helper.name.remove('[\s+\.]') %]_table_filter').prepend(f);
        $('#[% helper.name.remove('[\s+\.]') %]_datepicker_start').datepicker({
            "dateFormat": "yy-mm-dd",
            "onSelect": function(date) {
                [% helper.name.remove('[\s+\.]') %]_table.fnFilter(date, 0);
            }
        }).keyup( function () {
            [% helper.name.remove('[\s+\.]') %]_table.fnFilter(this.value, 0);    
        });
        [% has_from = 1 -%]
      [% END -%]
      [% IF col.search_to_epoch && !has_to -%]

        var t = '<label>To Date: <input type="text" id="[% helper.name.remove('[\s+\.]') %]_datepicker_end" class="ngcp-datepicker" rel="tooltip" data-original-title="YYYY-MM-DD"/></label>';
        if($('#[% helper.name.remove('[\s+\.]') %]_datepicker_start').length > 0) {
            $('#[% helper.name.remove('[\s+\.]') %]_datepicker_start').parent().after(t);
        } else {
            $('#[% helper.name.remove('[\s+\.]') %]_table_filter').prepend(t);
        }
        $('#[% helper.name.remove('[\s+\.]') %]_datepicker_end').datepicker({
            "dateFormat": "yy-mm-dd",
            "onSelect": function(date) {
                [% helper.name.remove('[\s+\.]') %]_table.fnFilter(date, 1);
            }
        }).keyup( function () {
            [% helper.name.remove('[\s+\.]') %]_table.fnFilter(this.value, 1);    
        });
        [% has_to = 1-%]
      [% END -%]
    [% END %]
} );
</script>

<div class="row">
    [% UNLESS back_created -%]
    <span class="pull-left" style="margin:0 5px 0 5px;">
        <a class="btn btn-primary btn-large" href="[% c.uri_for('/back') %]"><i class="icon-arrow-left"></i> Back</a>
    </span>
    [% back_created = 1 -%]
    [% END -%]
    [% FOR button IN helper.top_buttons -%]
        [% IF button.method == "post" -%]
            <form method="post" action="[% button.uri %]" style="float:left; margin:0 5px 0 5px;">
                <button class="btn btn-primary btn-large" style="height:47px;"><i class="[% button.icon %]"></i> [% button.name %]</button>
                <input type="hidden" name="back" value="[% c.req.uri %]"/>
            </form>
        [% ELSE -%]
            <span class="pull-left" style="margin:0 5px 0 5px;">
                <a class="btn btn-primary btn-large" href="[% button.uri %]"><i class="[% button.icon %]"></i> [% button.name %]</a>
            </span>
        [% END -%]
    [% END -%]
</div>

[% IF helper.messages -%]
<div class="row">
    [% FOREACH m IN helper.messages -%]
        <div class="alert alert-[% m.type %]">[% m.text %]</div>
    [% END -%]
</div>
[% END -%]

<div class="ngcp-separator"></div>

<table class="table table-bordered table-striped table-highlight table-hover ngcp-datatable" id="[% helper.name.remove('[\s+\.]') %]_table">
    <thead>
        <tr>
            [% FOREACH t IN helper.column_titles -%]
            <th>[% t %]</th>
            [% END -%]
            [% # one for actions -%]
            <th class="ngcp-actions-column"></th>
        </tr>
    </thead>
    <tbody>
        <tr class="sw_action_row">
            <td colspan="[% helper.column_titles.size + 1 %]">Loading...</td>
        </tr>
    </tbody>
</table>

[% IF helper.edit_flag || helper.create_flag == 1 -%]
[%
    PROCESS "helpers/modal.tt";
    modal_header(m.create_flag=helper.create_flag,
                 m.name = helper.name);
        helper.form_object.render;
    modal_footer();
    modal_script(m.close_target = helper.close_target);
-%]
[% END -%]
[% # vim: set tabstop=4 syntax=html expandtab: -%]