0

我正在尝试使用 jQuery Datatables 对从数据库获取的查询进行分页。使用的查询涉及大量格式化并将许多查询连接在一起，因此我选择构建一个完成的数组，我现在正在尝试为 Datatables 格式化。

在我的 HXTML 中，我有 jQuery，并且加载了 HXTML 的 jQuery DataTable 插件看起来像这样：

<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 不创建表格，因为此数据的格式几乎与此处的示例完全相同：Datatable Javascript array example

我想使用 DataTable 对这些数据进行分页。

你能明白为什么这不起作用或者我没有给你足够的继续吗？

4

3 回答 3

1

澄清目标<span id="search"></span>（您的代码示例中缺少一些尖括号）并稍微清理代码（您有 36 列和 38 个数据点），它应该可以工作：

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

于 2011-11-29T00:54:18.247 回答
0

似乎或多或少为我工作。我认为问题不是初始化，也不是数组。

http://live.datatables.net/ojuhep

我认为，必须看到一个活生生的例子，说明它在哪里破坏，才能开始排除故障。看看它是不是 CSS，来自其他地方的冲突 JS...

于 2011-11-29T18:50:51.240 回答
0

我能够得到这个工作。诀窍是，最初我在网页底部加载了所有 javascript。虽然这通常是一种很好的做法，但似乎 Datatables 喜欢在页面顶部加载。也许它是 CSS 冲突的，所以它需要在 css 应用之前加载，或者它可能只是它需要这个？

感谢大家对此的帮助！

问候，史蒂夫

于 2011-11-29T19:20:07.000 回答