实时表更新

时间:2014-10-17 21:13:36

标签: javascript ajax laravel-4

我想弄清楚如何实时更新表格。

实施例
表1有员工姓名,员工ID,有工作(复选框)
|从数据库中提取数据。检查转到表2 |

表2中有员工姓名,员工ID,有工作(已选中,已选中复选框)
|当由表1检查时,更新/插入数据库中的另一个表。并放在这里。 |

因此,表1中有一份员工清单,如果我标记他们有工作(已检查),他们会从该表转到另一张表(实时)。

顺便说一句,会有更多的表,如表1,但只有1表2.所有这些都将在1页上。 IDK,如果这很重要,但我使用的是Laravel 4框架。

所以我的想法可能是ajax?

如果有人有一些我可以学习的示例代码,我会很喜欢。提前谢谢。

2 个答案:

答案 0 :(得分:0)

使用jquery DataTables插件,易于实现,只使用json发送数据

http://www.datatables.net/

-----编辑-----

它只是一个例子,它创建了一个复选框,然后你可以使用jquery来检测已检查的事件并发送另一个ajax来更新服务器和/或更新第二个表

$(function () {
    $('#table').DataTable(
            {
                "ajax": {
                    "url": URL_DIR + "ajax/" + extradata,
                    "type": "POST",
                },
                "columnDefs": [
                    {"targets": [-1],
                        "defaultContent": '<input type="checkbox" name="test" value="test" class="ajax">',
                        "createdCell": function (td, cellData, rowData, row, col) {
                            $(td).children('input').attr('data-id', rowData[0]);
                        }},
                ],
            }
    )
    $('body').on('click', 'checkbox.ajax', function () {
        alert('click');
    });
})

答案 1 :(得分:0)

听起来你需要一个像Ember或Angular或Knockout或Backbone或?的框架。这些Javascript框架将通过AJAX连接到API并允许UI。

如果它是一个小项目,你可以使用jQuery来处理AJAX请求;没有必要的大框架。