Создание сайтов и веб-программирование

Помогите советом


← заложи эту тему или зарегистрируйся

Просьба сильно не пинать, поскольку только начал разбираться в данных вопросах, но сделать очень нужно)
Ситуация такова.
Необходимо разбить страницу на 2 горизонтальные области следущим образом:
В верхней части - таблица, являющаяся результатом работы хранимой процедуры из базы. Принимает диапазон дат и еще пару параметров. Размер возвращаемой результирующей таблицы - 30 столбцов и, как минимум, пара сотен строк.
В нижней части страницы - таблица, содержимое которой определяется выбранной строкой из первой таблицы. Данных уже поменьше.
Задача состоит в размещении этих таблиц на странице и более менее быстрой работе. Необходимо, чтобы данные не сползали вниз, и страница не увеличивалась, т.е. размер таблиц должен быть фиксирован.
Пробовал использовать плагин к jquery dataTable. Использовал так:
делал ajax запрос, вставлял в таблицу данные и "обрабатывал" таблицу плагином. Работает довольно шустро, но так и не разобрался со следующим:

1 - Что делать при повторном запросе? Пробовал удалять вручную таблицу и повторять процедуру создания(обработки плагином). Браузер просто вешается от нагрузки, хотя в первый раз тоже самое делал быстро. Конечно, хорошо бы задать настройки плагина на постоянную подгрузку данных через ajax. Но хранимая работает несколько секунд. Насколько производительно будет делать каждый раз запрос при вводе новых данных? Поэтому пока попробовал сделать проще - сначала выбираются даннные, а только потом их пользователь уже фильтрует.
Можно пойти другим путем и использовать API плагина, в котором функция добавления строки принимаем 2d массив javascript. Но как тогда возвращать с сервера результат (использую JSP)? Может запихнуть в json, а потом преобразовать в массив? Но как это сделать и какая будет производительность, пока не знаю. Может стоит вообще тогда отказаться от загрузки по ajax для верхней таблицы?
Еще такой момент: при добавлении в таблицу данных вручную с помощью функции добавления строки, выделение строки и взятие данных из нее содержимого необходимой ячейки работает нормально, даже из скрытого в данный момент столбца. А если "обрабатывать" плагином уже существующую таблицу, как сделано в моем случае, то не работает (событие click вообще не возникает) на тех строках, которые были скрыты при первом отображении на экране. Использовал пример из документации, где привязка идет к таблице с данными.

2 - Даже если разберусь с загрузкой данных, остается нерешенным вопрос о высоте таблицы. Хотелось бы, как в плагине Flexigrid, чтобы макс. высота была ограничена, т.е. необходима прокрутка. В dataTables таковой не нашел. Может кто работал с Flexigrid и подскажет, как можно будет там осуществить загрузку данных.
Да и с шириной таблицы тоже не все гладко. В dataTables, если данные не влезают, то содержимое таблицы уходит вправо, а обрамление (то, что создал плагин) остается на экране и не перемещается при прокрутке страницы. Пока частичное решение - выборочное отображение столбцов и обрамление содержимого ячеек с длинными строками в input, чтобы ограничить макс. длину. Пробовал задавать параметры ширины столбца в плагине при инициализации, но длиные строки все равно не обрезаются.

Буду благодарен за любые советы и замечания)

  

Женя, извини, что давно не отвечал. Проблемы решил свои?

  
1

Вроде все заработало так, как хотел) Если интересуют детали, могу написать.

  

Напиши.

  
1

Инициализация таблицы


var oTableWorks;     // таблица с данными
var oSettingsWorks;  // настройки таблицы с данными
/* применяем к таблице плагин для красивого отображения */
    oTableWorks = $("#WORKS").dataTable({
        "oLanguage": {
            "sProcessing":   "Подождите...",
            "sLengthMenu":   "Показать _MENU_ работ",
            "sZeroRecords":  "Работы с данными параметрами отсутствуют.",
            "sInfo":         "Показано с _START_ до _END_ из _TOTAL_ работ",
            "sInfoEmpty":    "Работы с 0 до 0 из 0 записей",
            "sInfoFiltered": "(отфильтровано из _MAX_ работ)",
            "sInfoPostFix":  "",
            "sSearch":       "Поиск по всем столбцам ",
            "sUrl":          "",
            "oPaginate": {
                "sFirst": "&nbsp; |< &nbsp;",
                "sPrevious": "&nbsp; < &nbsp;",
                "sNext": "&nbsp; > &nbsp;",
                "sLast": "&nbsp; >| &nbsp;"
            }
        },
        "bFilter": true,    /* включаем фильтр */
        "sPaginationType": "full_numbers",
        "bJQueryUI": true,          // использовать стили jquery UI
        "iDefaultSortIndex": 9,   // номер столбца, по которому сортируем по умолчанию
        "bAutoWidth": false,         // авто ширина столбца
        "bStateSave": false,          /* сохранять состояние таблицы в cookies */
        "bProcessing":false,         // отображать процесс работы - строку информации
        "iDisplayLength":5,          // первоначально количество отображаемых строк. -1 == all
        "aoColumns": [
        /* номер работы */
        {
            "bSearchable": false,
            "bSortable": false,
            "bVisible": false
        },

        /* просрочена ли работа */

        {
            "bSearchable": false,
            "bSortable": false
        },

        /* важность - категория работы */

        {
            "bSearchable": false,
            "bSortable": false
        },

        /*  */
        null,
        null,

        null,
        null,
        null,
        null,
        null,

        null,
        null,
        null,
        null,
        null,

        null,
        null,
        null,
        null,
        null,

        null,
        null,
        null,
        null,
        null,

        null,
        null,
        null,
        null,
        null,

        null
        ]
    });
    // берем настройки таблицы
    oSettingsWorks = oTableWorks.fnSettings();


Запрос содержимого таблицы

function getWorks(){   
    $.ajax({
        url: 'getWorks',
        dataType: "html",
        type: "POST",       
        data: {
            DATE_BEGIN      : $("#DATE_BEGIN").attr("value"),
            DATE_END        : $("#DATE_END").attr("value"),
            CBR_CODE        : $("#CBRS :selected").attr("value")           
        },       
        beforeSend: function(){
            // проверка параметров запроса           
            if(checkFiltersValues()){
                $("#message_area").text(" Запрос данных... ");
                $("#message_area").fadeIn(1000);
                $("#CLAIM_RESULTS_CONTAINER").hide();
                return true;   
            }else{
                return false; // false == отмена запроса
            }
        },
        // в случае ошибки во время запроса
        error: function(){
            $("#message_area ").text(" Ошибка во время запроса ");
            $("#message_area").hide(4000);
        },
        // функция исполнится при успешном запросе
        success: function(data, textStatus){
            $("#message_area").text(" Обработка данных... ");
            // удаляем прежнее содержимое таблицы
            if(oTableWorks != null){
                oTableWorks.fnClearTable(true);
            }
            // добавляем в таблицу то, что получили
            if(data != ""){
                oTableWorks.fnAddData(eval("(" + data + ")"), true);
            }
            data = null;           

            // добавляем прокрутку содержимого
            $("#WORKS").wrap("<div style='overflow: auto;'>");
            // данные таблицы отработали плагином. можно уже и отобразить
            $("#WORKS_CONTAINER").show();
            // убираем заставку
            $("#message_area").fadeOut(500);
        }
    });
}

  

Сама таблица тривиальна


<table id='WORKS' class='display'>
                    <thead>
                        <tr>
                            <th>Заявка</th>
                            <th title='Просрочена ли работа'>Пр</th>
                            <th title='Приоритет работы'>Вж</th>
                            .....
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th><input type='hidden'  class='search_init' /></th>
                            <th><input type='hidden' class='search_init' /></th>
                            <th><input type='hidden'  class='search_init' /></th>
                            ......
                        </tr>
                    </tfoot>
                </table>

  
Проблема с таблицей в блочной верстке Помогите советом встроенная рамка