tmsTable может работать с 2 типами данных:

  • array - локальные данные в массиве объектов (не является приоритетом разработки)
  • jsonp - данные на удаленном хосте. данные в формате json

Подключение требуемых файлов:

Аскетично:

<link rel="stylesheet" href="css/tmsTable.css">
<script src="js/jquery-1.10.2.min.js" type="application/x-javascript"></script>
<script src="js/tmsTable.js" type="application/x-javascript"></script>


С элементами bootstrap 3

<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/tmsTable.css">

<script src="js/jquery-1.10.2.min.js" type="application/x-javascript"></script>
<script src="bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/tmsTable.js" type="application/x-javascript"></script>

Для создания таблицы на странице сайта нужно определить контейнер, который будет содержать табличку

<div id="table_container"></div>

Далее нужно понять с каким типом данных мы работаем. Для простоты буду рассматривать jsonp поскольку он будет нужен в подавляющем большинстве сллучаев.

Табличка с исходными данными в статичном массиве
    
        <div id="static_table"></div>
        <script>
        var data = [];
        data.push({id: 1, title: 'test1', date: '2014-01-01'});
        data.push({id: 2, title: 'test2', date: '2014-01-02'});
        data.push({id: 3, title: 'test3', date: '2014-01-03'});

        data_obj = {}
        data_obj.rows = data;
        data_obj.total = data.length;
        data_obj.page = 1;
        data_obj.page_num = 2;


        params = {
        id: 'static_table'
        , class: 'table table-bordered table-striped table-hover'
        , col_names: ['id', 'title', 'date']
        , dataType: 'array'
        , src: data_obj
        , cols: [
        {index: 'id', name: 'id'}
        , {index: 'title', name: 'title'}
        , {index: 'date', name: 'date'}
        ]
        };
        var tbl = new tmsTable(params)
        tbl.render();
        </script>
    

Табличка с json данными
    
        <div id="json_table1"></div>
        <script>

        params = {
        id: 'static_table1'
        , class: 'table table-bordered table-striped table-hover'
        , col_names: ['id', 'title', 'date']
        , dataType: 'array'
        , src: data_obj
        , cols: [
        {index: 'id', name: 'id'}
        , {index: 'title', name: 'title'}
        , {index: 'date', name: 'date'}
        ]
        };
        var tbl = new tmsTable(params)
        tbl.render();
        </script>
    

Табличка с json данными с запретом сортировки по дате
    
        <div id="json_table2"></div>
        <script>

        params = {
        id: 'static_table2'
        , class: 'table table-bordered table-striped table-hover'
        , col_names: ['id', 'title', 'date']
        , dataType: 'array'
        , src: data_obj
        , cols: [
        {index: 'id', name: 'id'}
        , {index: 'title', name: 'title'}
        , {index: 'date', name: 'date', sortable: false}
        ]
        };
        var tbl = new tmsTable(params)
        tbl.render();
        </script>
    

Табличка с json данными с колонками фиксированной ширины
    
        <div id="json_table1"></div>
        <script>

        params = {
        id: 'static_table'
        , class: 'table table-bordered table-striped table-hover'
        , col_names: ['id', 'title', 'date']
        , dataType: 'array'
        , src: data_obj
        , cols: [
        {index: 'id', name: 'id', width: 50}
        , {index: 'title', name: 'title'}
        , {index: 'date', name: 'date', sortable: false, width: 100}
        ]
        };
        var tbl = new tmsTable(params)
        tbl.render();
        </script>
    

Табличка с json данными c декоратором колонки
    
        <div id="json_table4"></div>
        <script>

        params = {
        id: 'static_table4'
        , class: 'table table-bordered table-striped table-hover'
        , col_names: ['id', 'title', 'date']
        , dataType: 'array'
        , src: data_obj
        , cols: [
        {index: 'id', name: 'id', width: 50}
        , {index: 'title', name: 'title', decorator: function(rowId, rowData, rowObject, cellvalue){ return '<b>'+cellvalue+'<b>';}}
        , {index: 'date', name: 'date', sortable: false, width: 100}
        ]
        };
        var tbl = new tmsTable(params)
        tbl.render();
        </script>
    

Табличка с json данными c декоратором строк
    
        <div id="json_table5"></div>
        <script>
        params = {
        id: 'static_table5'
        , class: 'table table-bordered table-striped table-hover'
        , col_names: ['id', 'title', 'date']
        , dataType: 'array'
        , src: data_obj
        , cols: [
        {index: 'id', name: 'id', width: 50}
        , {index: 'title', name: 'title', decorator: function(rowId, rowData, rowObject, cellvalue){ return '<b>'+cellvalue+'<b>';}}
        , {index: 'date', name: 'date', sortable: false, width: 100}
        ]
        ,afterInsertRow: function(rowId, rowData, rowObject ){rowObject.css('color','orange') }
        };
        var tbl = new tmsTable(params)
        tbl.render();
        </script>
    

Табличка с json данными с выбором строк
Показыть выбранные
    
        <div id="json_table6"></div>
        <script>

        params = {
            id: 'static_table6'
            , class: 'table table-bordered table-striped table-hover'
            , col_names: ['id', 'title', 'date']
            , dataType: 'array'
            , src: data_obj
            , cols: [
                {index: 'id', name: 'id'}
                , {index: 'title', name: 'title'}
                , {index: 'date', name: 'date', sortable: false}
            ]
        };
        var tbl = new tmsTable(params)
        tbl.render();

        foo6 = function(){
            var selected = '';
            var s = tbl6.getSelectedIndexes();
            if(!s.length){
                var text = 'Нет выбранных строк';
            }else{
                if(s==-1){
                    var text = 'Выбраны все строки';
                }else{
                    var text = 'Выбраны строки: '+implode(', ',s);
                }
            }
            alert(text)
        }
        </script>
    

Контакты

IT Layout.ru
Тел.: 8 (916) 183-46-19
© 2015. All Rights Reserved.