jQuery DataTables согласно их учебнику, не загружающему массив javascript - PullRequest
Новая
       11

jQuery DataTables согласно их учебнику, не загружающему массив javascript

0 голосов
/ 29 ноября 2011

Я пытаюсь использовать jQuery Datatables для разбивки на страницы запроса, полученного из базы данных. Используемый запрос включает в себя много форматирования и объединение множества запросов, поэтому я решил создать законченный массив, который сейчас пытаюсь отформатировать для Datatables.

В моем HXTML у меня есть jQuery и загруженный плагин jQuery DataTable, HXTML выглядит так: 

<span id='search'>
</span>
<script type='text/javascript' >
$(document).ready(function() {
  $('#search').html("<table id='search_table' class='tablesorter'></table>");
  $('#search_table').dataTable( {
    'aaData': [ 
    [ 'example status 2', '1', '2011-06-15', '2011-06-15', '2011-06-15', '', 'Bill',   'Father', '1', 'Henry', 'Husband', '1', 'Hamilton Harron Funeral Home', 'Dan Thompson', 'Steve', '1', '2001-05-11', '2', '2003-11-05', 'Non Registrant Test Program - Advantage', '--', '--', '--', 'Onelia', 'Gamboli', 'home', '', 'Houston', 'Texas', '77019', '--', '--', '--', '--', '--', '', 'Pre-Need', 'This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  '  ]
    , [ '', '2', '2011-07-02', '2011-07-02', '2011-07-02', '', '--', '--', '--', '--', '--', '--', 'Floral Haven Funeral Home ', 'Jayson Gordon', 'Henry', '3', '2003-12-02', '4', '2004-03-05', 'Non Registrant Test Program - Advantage', '--', '--', '--', 'Leona', 'Brown', 'home', '5110 Rodgewill Rd ', 'Burlington', 'Sussex', '79011', '9023219235', '--', '9026323532', '--', '--', 'h@hios.com', 'PN to AN', 'This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  '  ]
    , [ 'example1 status', '3', '2011-09-05', '2011-09-05', '2011-09-05', '', 'Onelia', 'Wife', '1', '--', '--', '--', 'First Memorial Funeral Services', 'Dan', 'Steve', '5', '2010-11-11', '7', '2011-08-19', 'Non Registrant Test Program - Dignity', '6', '2011-07-03', 'Non Registrant Test Program - Advantage', 'Henry', 'Sale', 'company', '4125 Harvester Rd. 4', 'Sussex', 'Widimer', '72212', '9025229202', '9027205202', '--', '--', '--', 'pewter@live.ca', 'At-Need', 'This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  '  ]
    ],                       
    'aoColumns': [
    {      'sTitle': 'Status'    }
    ,{      'sTitle': 'Contact ID Number'    }
    ,{      'sTitle': 'Date Entered'    }
    ,{      'sTitle': 'Date Assigned'    }
    ,{      'sTitle': 'Date Last Modified'    }
    ,{      'sTitle': 'Deceased Date'    }
    ,{      'sTitle': 'Linked To Registrant 1'    }
    ,{      'sTitle': 'Relationship 1'    }
    ,{      'sTitle': 'Authorization 1'    }
    ,{      'sTitle': 'Linked To Registrant 2'    }
    ,{      'sTitle': 'Relationship 2'    }
    ,{      'sTitle': 'Authorization 2'    }
    ,{      'sTitle': 'Location', 'sClass': 'location_cell'    }
    ,{      'sTitle': 'Sales Manager'    }
    ,{      'sTitle': 'Counselor'    }
    ,{      'sTitle': 'Registration Number'    }
    ,{      'sTitle': 'Registration Date'    }
    ,{      'sTitle': 'Program 1 Number'    }
    ,{      'sTitle': 'Program 1 Date', 'sClass': 'program_cell'    }
    ,{      'sTitle': 'Program 1 Name', 'sClass': 'program_cell'    }    
    ,{      'sTitle': 'Program 2 Number'    }
    ,{      'sTitle': 'Program 2 Date', 'sClass': 'program_cell'    }
    ,{      'sTitle': 'Program 2 Name', 'sClass': 'program_cell'    }
    ,{      'sTitle': 'First Name'    }
    ,{      'sTitle': 'Last Name'    }
    ,{      'sTitle': 'Address Location 1'    }
    ,{      'sTitle': 'City 1'    }
    ,{      'sTitle': 'State/Province 1'    }
    ,{      'sTitle': 'Zip/Postal Code 1'    }
    ,{      'sTitle': 'Home Phone'    }
    ,{      'sTitle': 'Work Phone'    }
    ,{      'sTitle': 'Mobile Phone'    }
    ,{      'sTitle': 'Pager'    }
    ,{      'sTitle': 'Other Phone'    }
    ,{      'sTitle': 'Sales Type'    }
    ,{      'sTitle': 'Note 1', 'sClass': 'note_cell'    }
    ]                  
  } );
} );
</script>

Я не уверен, почему DataTables не создает таблицу, так как эти данные отформатированы почти так же, как пример, приведенный здесь: Пример массива Javascript с возможностью регистрации данных

Я бы хотел использовать DataTable для разбиения на страницы этих данных.

Вы понимаете, почему это не сработает, или я не дал вам достаточно денег?

Ответы [ 3 ]

1 голос
/ 29 ноября 2011

Уточните цель <span id="search"></span> (в вашем примере кода отсутствуют некоторые угловые скобки) и немного очистите код (у вас есть 36 столбцов и 38 точек данных), и он должен работать:

http://jsfiddle.net/fvgAU/1/

0 голосов
/ 29 ноября 2011

Я смог заставить это работать. Хитрость была в том, что изначально я загружал весь свой javascript внизу своей веб-страницы. Хотя обычно это хорошая практика, кажется, что Datatables нравится загружать вверху страницы. Может быть, это конфликт CSS, поэтому он должен быть загрузчиком перед применением CSS, или это может быть просто необходимо?

Спасибо всем за помощь в этом!

С уважением, Стив

0 голосов
/ 29 ноября 2011

Кажется, более или менее работает для меня.Я не думаю, что проблема заключается в инициализации, ни в массиве.

http://live.datatables.net/ojuhep

Нужно было бы увидеть живой пример того, как он ломается для вас, чтобы даже начатьЯ думаю, что поиск и устранение неисправностей.Посмотрите, не противоречит ли это CSS, JS откуда-то еще ...

...