{% load i18n %}

<head>
<style>

    #tb-dlg tbody td{
        word-wrap:break-word;
    }  
    .highlight {   
        color:white;
        font-weight:bold;

        background: rgb(204,0,0); /* Old browsers */
        background: -moz-linear-gradient(top,  rgba(204,0,0,1) 0%, rgba(204,0,0,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(204,0,0,1) 0%,rgba(204,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(204,0,0,1) 0%,rgba(204,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#cc0000',GradientType=0 ); /* IE6-9 */        
    }
</style>
</head>

<script src="/static/js/jquery.highlight-5.js"></script>

<script type="text/javascript">    
    $(document).ready(function(){    
        var table=$('#tb-dlg').DataTable({
            dom: 'Bfrtip',
            autoWidth: false,
            buttons: [{extend:'excelHtml5',text:'导出到Excel'}],           
            language:lng,            
            destroy:true,
            data:{{data|safe}},  


            
            //"scrollY":        300,
            //"scrollCollapse": true,
            //"jQueryUI":       true,




            //"scrollY": true,
            /*
            drawCallback: function (settings) {
                var api = this.api();
                var rows = api.rows({page: 'current'}).nodes();

                // console.log('idx = ' + rows[0].cells.length);

                //var idx = 0;    // 第一列进行合并
                var last = null;
                var tr = null;
                var ltd = null;
                api.column(0, {page: 'current'}).data().each(function (group, i) {
                    tr = $(rows[i]);
                    var td = $("td:eq(" + 0 + ")", tr);
                    if (last !== group) {
                        td.attr("rowspan", 1);
                        td.text(group);
                        ltd = td;
                        last = group;
                        td.css("vertical-align", "middle");
                    } else {
                        ltd.attr("rowspan", parseInt(ltd.attr("rowspan")) + 1);
                        td.remove();
                    }
                });
               
                api.column(1, {page: 'current'}).data().each(function (group, i) {
                    tr = $(rows[i]);
                    var td = $("td:eq(" + 1 + ")", tr);
                    if (last !== group) {
                        td.attr("rowspan", 1);
                        td.text(group);
                        ltd = td;
                        last = group;
                        td.css("vertical-align", "middle");
                    } else {
                        ltd.attr("rowspan", parseInt(ltd.attr("rowspan")) + 1);
                        td.remove();
                    }
                });
                api.column(2, {page: 'current'}).data().each(function (group, i) {
                    tr = $(rows[i]);
                    var td = $("td:eq(" + 2 + ")", tr);
                    if (last !== group) {
                        td.attr("rowspan", 1);
                        td.text(group);
                        ltd = td;
                        last = group;
                        td.css("vertical-align", "middle");
                    } else {
                        ltd.attr("rowspan", parseInt(ltd.attr("rowspan")) + 1);
                        td.remove();
                    }
                });
                
            }
            */
            
            


            
        });      
        
        //table.columns().every( function () {                        
        //    var that = this;             
        //    $('input', this.footer() ).on( 'keyup change clear', function () {
        //        if ( that.search() !== this.value ) {
        //            that.search( this.value ).draw();
        //        }
        //   });
        //});            



        table.on('draw', function () {        
            var body = $('#tb-dlg tbody');
            $(body).removeHighlight();
            $(body).highlight(table.search());            
        });
        
    });
</script>

<div class='inventory-tt'>
   
</div>
<div class="clearfix"></div>


<div id="inventory-list" class="table-responsive">    

    <table id="tb-dlg" class="table table-striped table-bordered dt-responsive" width="100%">
        <thead><tr>
            {% for c in clmns %}
                <th>{{c}}</th>
            {% endfor %}
            
        </tr></thead><tbody></tbody>
        
    </table>       
</div>



