nlybe / datatables_api
Elgg上的DataTables集成
5.14
2023-06-06 14:20 UTC
Requires
- composer/installers: >=1.0.8
- datatables/datatables: ^1.10
Conflicts
- elgg/elgg: <5.0
README
Elgg上的DataTables集成。此插件提供API,可在Elgg平台上由其他插件使用,以填充数据表中的信息。
DataTables是jQuery JavaScript库的一个插件。它是一个高度灵活的工具,基于渐进增强的基础,并为任何HTML表格提供高级交互控件。
Elgg插件提供以下选项
- 通过加载所有记录创建简单的DataTable(不建议用于大数据集)。
- 使用Ajax请求从数据库获取记录。
- 使用DataTables提供的服务器端选项,因此所有分页、搜索和排序操作都通过使用Ajax请求获取所需数据来完成。
- 如果设置中启用,添加复制、csv、pdf和打印等导出按钮。
作为使用示例,您可以查看Elgg Entity Lists,它使用datatables_api插件生成Elgg实体的列表。
安装
使用Composer安装此插件。在网站根目录下,运行以下命令
composer require nlybe/datatables_api
如何使用
示例1 - 使用Ajax请求和服务器端处理
$dt_options = [ 'action' => 'demoplugin/users', ]; $dt_options['headers'] = [ ['name' => 'id', 'label' => elgg_echo('ID')], ['name' => 'name', 'label' => elgg_echo('Name')], ['name' => 'username', 'label' => elgg_echo('Username')], ['name' => 'email', 'label' => elgg_echo('Email')], ['name' => 'created', 'label' => elgg_echo('Created')], ['name' => 'updated', 'label' => elgg_echo('Updated')], ['name' => 'actions', 'label' => elgg_echo('Actions')], ]; echo elgg_view('datatables_api/dtapi_ajax', $dt_options);
在'views/default/resources/demoplugin/users.php'中使用以下代码
$search = get_input('search'); $options = array( 'type' => 'user', 'limit' => 0, 'count' => true, ); $options["joins"] = []; $options["wheres"] = []; $dbprefix = elgg_get_config('dbprefix'); if ($search && !empty($search['value'])) { $query = $search['value']; array_push($options["joins"], "JOIN {$dbprefix}users_entity ge ON e.guid = ge.guid"); array_push($options["wheres"], "(ge.name LIKE '%$query%' OR ge.username LIKE '%$query%' OR ge.email LIKE '%$query%')"); } $totalEntries = elgg_get_entities_from_metadata($options); $options['count'] = false; $options['limit'] = max((int) get_input("length", elgg_get_config('default_limit')), 0); $options['offset'] = get_input ("start", 0); $entities = elgg_get_entities_from_metadata($options); $dt_data = []; if ($entities) { foreach ($entities as $e) { $dt_data_tmp = []; // datatable $dt_data_tmp['id'] = $e->getGUID(); $dt_data_tmp['name'] = elgg_view('output/url', array( 'href' => $e->getURL(), 'text' => $e->name, 'title' => elgg_echo('entity_lists:admin:elgg_objects:view_entity'), 'is_trusted' => true, )); $dt_data_tmp['username'] = elgg_view('output/url', array( 'href' => $e->getURL(), 'text' => $e->username, 'title' => elgg_echo('entity_lists:admin:elgg_objects:view_entity'), 'is_trusted' => true, )); $dt_data_tmp['email'] = $e->email; $dt_data_tmp['created'] = date("r", $e->time_created); $dt_data_tmp['updated'] = date("r", $e->time_updated); $dt_data_tmp['actions'] = elgg_view('output/url', array( 'href' => "action/entity/delete?guid={$e->getGUID()}", 'text' => elgg_view_icon('remove'), 'title' => elgg_echo('delete:this'), 'is_action' => true, 'data-confirm' => elgg_echo('deleteconfirm'), )); array_push($dt_data, $dt_data_tmp); } } $total_rows = count($entities); $draw = get_input('draw'); $result = [ 'draw' => isset($draw)?intval($draw):1, 'recordsTotal' => $totalEntries, 'recordsFiltered' => $totalEntries, 'data' => $dt_data, ]; // release variables unset($entities); echo json_encode($result); exit;
示例2
以下示例代码将显示一个包含3列的DataTable。仅建议用于少量记录。
// set an array with titles of table $vars['dt_titles'] = array( elgg_echo('my_plugin:datatables:example:title1'), elgg_echo('my_plugin:datatables:example:title2'), elgg_echo('my_plugin:datatables:example:title3'), ); // set an array with data of table $dt_data = []; $entities = elgg_get_entities($options); foreach (entities as $e) { $dt_data_tmp = []; $dt_data_tmp['guid'] = $e->getGUID(); $dt_data_tmp['title'] = $e->title; $dt_data_tmp['likes'] = calculate_likes($e); array_push($dt_data, $dt_data_tmp); } $vars['dt_data'] = $dt_data; echo elgg_view('datatables_api/datatables_api', $vars);
未来任务列表
- 为datatables创建一个类,所有参数都将通过此类的函数传递
- 集成更多来自DataTables的选项,如样式、按列搜索等
- 使用服务器端选项时修复排序问题