FooTables插件(与DataTables类似) - 如何从服务器/数据库中检索列和行数据

时间:2016-10-13 19:29:01

标签: javascript php database footable

注意:请记住我不懂JavaScript,我只知道基本PHP。

我搜索过高,低,远,&宽。我甚至试图学习一些JS来找出解决方案。但我一切都失败了。令人惊讶的是,这个问题在这个网站上并不存在。所以这里没有重复的问题。另外,请不要将此问题与有关从json文件加载大型数据集(大量行)的其他问题混淆。存在这些问题,我已经知道如何做到这一点。

使用DataTables插件很容易。并且有文档向您展示如何完成此操作。可悲的是,这在fooTable网站上并不存在。

Here is the only page that FooTables has that is even close to what I need. 分解问题,因为它适用于任何人:

  • 页面上的表格使用的是FooTable插件
  • 数据库中有10,000行数据。
  • 网站所有者需要将数据库连接到表格
  • 桌子有分页。每页10行。
  • 页面加载时只应加载10行。不是整个记录数据库。
  • 在页面加载时,表格从数据库中拉出10行,只有10行,使页面速度更快。

这基本上就是我所需要的。

对此问题的任何帮助表示赞赏我已经参加了2周而没有取得任何积极成果。请记住,我不知道JavaScript,我只知道基本的PHP。提前谢谢!

编辑:这是执行rows.php的正确方法吗?

<?php 
// rows
$rowData = array(
    'id' => $id,
    'firstName' => $firstName,
    'something' => $something,
    'jobTitle' => $jobTitle,
    'started' => $started,
    'dob' => $dob,
    'status' => $status 
);

header('Content-Type: application/json');
echo json_encode($rowData, JSON_UNESCAPED_SLASHES);

1 个答案:

答案 0 :(得分:1)

“从JSON文件加载”实际上是相关的。

在您链接的页面中,他们提供以下代码:

jQuery(function($){
    $('.table').footable({
        "columns": $.get('columns.json'),
        "rows": $.get('rows.json')
    });
});

这是向服务器发出AJAX请求以从JSON文件中获取数据,但只要服务器使用JSON数据进行响应,就不必来自文件。

那么你要做的是$.get('/columns.php')来获取列数据,而$.get('/rows.php')来获取行数据。 More on $.get here

然后,在columns.php内,您必须进行数据库调用,提取数据,将其构建为same as thisand this,然后json_encode

现在我知道你说你不知道任何JS和只有一点PHP,但是你将不得不学习一些,因为我不会为你编写所有代码;)

<?php // columns.php
$data = array (
    array (
        'name' => 'id',
        'title' => 'ID',
        'breakpoints' => 'xs sm',
        'type' => 'number',
        'style' =>
            array (
                'width' => 80,
                'maxWidth' => 80,
            ),
    ),
    array (
        'name' => 'firstName',
        'title' => 'First Name',
    ),
    array (
        'name' => 'lastName',
        'title' => 'Last Name',
    ),
    array (
        'name' => 'something',
        'title' => 'Never seen but always around',
        'visible' => false,
        'filterable' => false,
    ),
    array (
        'name' => 'jobTitle',
        'title' => 'Job Title',
        'breakpoints' => 'xs sm',
        'style' =>
            array (
                'maxWidth' => 200,
                'overflow' => 'hidden',
                'textOverflow' => 'ellipsis',
                'wordBreak' => 'keep-all',
                'whiteSpace' => 'nowrap',
            ),
    ),
    array (
        'name' => 'started',
        'title' => 'Started On',
        'type' => 'date',
        'breakpoints' => 'xs sm md',
        'formatString' => 'MMM YYYY',
    ),
    array (
        'name' => 'dob',
        'title' => 'Date of Birth',
        'type' => 'date',
        'breakpoints' => 'xs sm md',
        'formatString' => 'DD MMM YYYY',
    ),
    array (
        'name' => 'status',
        'title' => 'Status',
    ),
);

header('Content-Type: application/json');
echo json_encode($data, JSON_UNESCAPED_SLASHES);

这与fooTable的columns.json示例完全相同,只是在PHP中。

现在它在PHP中,您可以从数据库中提取数据而不是硬编码。我不知道你的数据库是什么样的,所以即使我想,也无法为你编写代码。

rows.php看起来几乎相同,只是一种不同的数组格式。