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

<script src="/js/libs/datatables-bootstrap-paging.js"></script>
<style>
div.modal {
    width: 816px;
    margin: -250px 0 0 -408px
}

div.modal .table thead tr th, div.modal .table tbody tr td {
    padding-top: 4px;
    padding-bottom: 4px;
}

div.modal .help-inline {
    clear: both;
    float: left;
}

div.dataTables_length label {
    width: 460px;
    float: left;
    text-align: left;
}
 
div.dataTables_filter, div.dataTables_paginate {
    float: right;
}
 
div.dataTables_info {
    padding-top: 8px;
}
 
div.dataTables_paginate {
    float: right;
    margin: 0;
}
 
table {
    margin: 1em 0;
    clear: both;
}

table .header {
    cursor: pointer;
}

table .header:after {
  content: "";
  float: right;
  margin-top: 7px;
  border-width: 0 4px 4px;
  border-style: solid;
  border-color: #fff transparent;
  visibility: hidden;
}
table .header:hover:after {
  visibility: visible;
}
table .headerSortDown:after, table .headerSortDown:hover:after {
  visibility: visible;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}
table .headerSortUp:after {
  border-bottom: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
  visibility: visible;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}

div.modal .dataTables_wrapper {
    padding: 5px;
}

div.modal .control-group.error .dataTables_wrapper {
    border: 1px solid #B94A48;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -mozilla-border-radius: 3px;
}

div.modal .dataTables_wrapper input[type="text"] {
    line-height: 10px;
    height: 10px;
}

div.modal .control-group.error .dataTables_wrapper input[type="text"] {
    border: 1px solid #cccccc;
}

</style>
<script type="text/javascript">

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

$(document).ready(function() {
	$('#[% helper.name.remove('[\s+\.]') %]_table')
	    .dataTable( {
        "sDom": "<'row'<'span6'r><'span6'f>>t<'row'<'span6'i><'span6'p>>",
        "bProcessing": true,
        "bServerSide": true,
        "bPaginate": true,
        "sPaginationType": "bootstrap",
        "bLengthChange": true,
        "bSort": true,
        "bInfo": true,
		"iDisplayLength": 5,
		"sAjaxSource": "[% c.uri_for( c.controller.action_for('ajax') ) %]",
		"aoColumns": [
		    [% FOREACH f IN helper.column_fields -%]
		    { "sName": "[% f %]" },
		    [% END -%]
		    {   "mRender": function ( data, type, full ) {
                    return '' +
                    '<div class="sw_actions pull-right">' +
                      '<a style="display:inline;line-height:16px;" class="btn btn-small btn-primary" href="[% c.uri_for( c.controller.action_for("") ) %]/' + full[0] + '/edit">' +
                        '<i class="icon-edit" style="line-height:1em;margin-top:2px"></i> Edit' +
                      '</a>' +
                      '<a style="display:inline;line-height:16px;margin-left:5px;" class="btn btn-small btn-secondary" href="[% c.uri_for( c.controller.action_for("") ) %]/' + full[0] + '/delete">' +
                        '<i class="icon-trash" style="line-height:1em;margin-top:2px"></i> Delete' +
                      '</a>' +
                    '</div>';
                },
                "mData": null,
                "bSortable": false
            }
		],
		"fnDrawCallback": function( oSettings ) {
                $('.sw_actions').hide();
                $('.sw_action_row').hover(
                    function() { $(this).find('.sw_actions').show(); },
                    function() { $(this).find('.sw_actions').hide(); }
                );
        },
        "fnRowCallback": function(nRow, aData, iDisplayIndex) {
            nRow.className = "sw_action_row";
            return nRow;
        },
	} );
	
} );
</script>


<div class="row">
    <a class="btn btn-primary btn-large" href="[% c.uri_for(c.action, c.req.captures, 'create') %]"><i class="icon-star"></i> Create [% helper.name %]</a>
</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 style="margin-top:10px;"></div>

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

[% IF helper.edit_object || helper.create_flag == 1 -%]
<div id="mod_edit" class="modal hide" style="display:block">
    <div class="modal-header">
        <button id="mod_close" type="button" class="close">×</button>
        <h3>[% helper.create_flag == 1 ? 'Create' : 'Edit' %] [% helper.name %]</h3>
    </div>
    [% helper.form_object.render -%]
</div>
<script>
    $(function () {
        $('#mod_edit').modal({keyboard: false, backdrop: 'static'});
        $('#mod_close').click(function(event) {
            window.location.href="[% helper.close_target ? helper.close_target : c.uri_for() %]";
        });

        // on clicking a button within the form, add a hidden field "submitid"
        // determining the name of the button being clicked
        $('input[type=button]').click(function() {
            $(this).parents('form').find('#submitid').attr('value', $(this).attr('name'));
            $(this).parents('form').submit();
        });
    });
</script>
[% END -%]
[% # vim: set tabstop=4 syntax=html expandtab: -%]