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

标签 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 行,从而使页面速度更快。

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

感谢任何有关此事的帮助,我已经这样做了两周,但没有取得积极的结果。另请记住,我不懂 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);

最佳答案

“从 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 看起来几乎相同,只是数组格式不同。

关于javascript - FooTables 插件(类似于 DataTables) - 如何从服务器/数据库检索列和行数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40029384/

相关文章:

javascript - 在模块中捆绑 Controller 会导致 angularjs 1.5 中未定义

php - 使用类似于 HTTP_X_FORWARDED_FOR 的方法在 laravel 中获取用户 IP 地址

sql - 合并查询结果中的记录

php - 在我的网站中使用 javascript(或 php)获取 Facebook 帖子/事件/新闻/画廊

php - Azure Web应用程序部署默认文档index.php内部服务错误

java - 将 SQL 计数设置为 java 中的变量

ruby-on-rails - 如何在 Rails 3.2 中应用自动增量

javascript - openlayers3 - 将节点设置为 ol.control.FullScreen 控件的标签

javascript - 如何防止ajax post请求提交两次?

javascript - getElementsByClassName 不是函数 javascript