动态表JQuery编辑

时间:2013-11-19 15:55:35

标签: javascript jquery html dynamic-tables

我是JQuery的全新手,但我需要有人帮助这一部分。 我正在处理模板中的动态表。我希望删除每页10条记录,但我不知道该怎么做。有人请吗?

这是我仍然可以理解的HTML代码

<table class="table table-striped border-top" id="sample_1">
        <thead>
          <tr>
            <!-- <th style="width:8px;"><input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes" /></th> -->
            <th>No</th>
            <th>Name</th>
            <th class="hidden-phone">Name</th>
            <th class="hidden-phone">Text</th>
            <th class="hidden-phone">Text</th>
            <th class="hidden-phone">Text</th>
          </tr>
        </thead>
        <tbody>
          <tr class="odd gradeX">
            <!-- <td><input type="checkbox" class="checkboxes" value="1" /></td> -->
            <td>1</td>
            <td>Jhone doe</td>
            <td class="hidden-phone"><a href="mailto:jhone-doe@gmail.com">jhone-doe@gmail.com</a></td>
            <td class="hidden-phone">10</td>
            <td class="center hidden-phone">02.03.2013</td>
            <td class="hidden-phone"><span class="label label-success">Approved</span></td>
          </tr>
          <tr class="odd gradeX">
            <!-- <td><input type="checkbox" class="checkboxes" value="1" /></td> -->
            <td>2</td>
            <td>dipsdf</td>
            <td class="hidden-phone"><a href="mailto:soa bal@gmail.com">lorem-ip@gmail.com</a></td>
            <td class="hidden-phone">33</td>
            <td class="center hidden-phone">05.04.2013</td>
            <td class="hidden-phone"><span class="label label-success">Approved</span></td>
          </tr>
        </tbody>
      </table>

Jquery部分,我不知道它在那里做什么

var Script = function () {

    // begin first table
    $('#sample_1').dataTable({
        "sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
        "sPaginationType": "bootstrap",
        "oLanguage": {
            "sLengthMenu": "_MENU_ records per page",
            "oPaginate": {
                "sPrevious": "Prev",
                "sNext": "Next"
            }
        },
        "aoColumnDefs": [{
            'bSortable': false,
            'aTargets': [0]
        }]
    });

    jQuery('#sample_1 .group-checkable').change(function () {
        var set = jQuery(this).attr("data-set");
        var checked = jQuery(this).is(":checked");
        jQuery(set).each(function () {
            if (checked) {
                $(this).attr("checked", true);
            } else {
                $(this).attr("checked", false);
            }
        });
        jQuery.uniform.update(set);
    });

    jQuery('#sample_1_wrapper .dataTables_filter input').addClass("form-control"); // modify table search input
    jQuery('#sample_1_wrapper .dataTables_length select').addClass("form-control"); // modify table per page dropdown}();

我正在尝试将表格与数据库中的显示数据相关联,同时用一个添加按钮替换每页10个记录部分。有人请。

欣赏。

1 个答案:

答案 0 :(得分:1)

如果您只是想一次列出所有记录(加上隐藏选项以更改每页显示的数字),您必须禁用分页。

将以下选项添加到数据表调用中。

"bPaginate": false

详细了解数据表选项here

修改

如果您仍想分页但只是隐藏“每页”选项,请改用以下选项。

"bLengthChange": false

JSFiddle