分页效果datable

最新推荐文章于 2022-12-06 22:37:41 发布

郭豪杨

最新推荐文章于 2022-12-06 22:37:41 发布

阅读量273

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42603150/article/details/87864832

本文介绍如何利用DataTables插件在网页中创建动态数据表格，包括禁用排序、设置初始排序和添加自定义跳转功能。通过实例展示了如何配置DataTables参数以实现特定需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

</head>
<body>
<table id="example_web" class="table table-bordered table-hover">
    <thead>
    <tr class="example2_tr">
        <th>试图</th>

        <th>编辑</th>

        <th>详情</th>
    </tr>
    </thead>
    <tbody id="tab_web">

    </tbody>

</table>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document" id="my-modal-alert">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h5 class="modal-title" id="exampleModalLabel">添加内网接口</h5>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="recipient-name4" class="control-label">网关</label>
                    <input type="text" class="form-control" id="recipient-name4" value="">
                </div>
            </div>
            <div class="modal-footer class-cls">

                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">确认</button>

            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js.js"></script>
<script>
    // var data_all_ipManageInfo;
    $.ajax({
        "url":'http://localhost:3000/item/ztop',
        "type": 'POST',
        async: false,
        success:function(data){
            data_all_ipManageInfo = data;

            test();
        }
    });




    $(function () {

            $('#example_web').DataTable({
                    'language': {
                "processing": "处理中...",
                "lengthMenu": "显示 _MENU_ 项结果",
                "zeroRecords": "没有匹配结果",
                "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "infoFiltered": "(由 _MAX_ 项结果过滤)",
                "infoPostFix": "",
                "search": "搜索:",
                "uUrl": "",
                "emptyTable": "表中数据为空",
                "loadingRecords": "载入中...",
                "infoThousands": ",",
                "paginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "aria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
                    "deferRender": true,
                    "searching": false,
                    "destroy": true,
                    "bSort" : false,
                "data": [
                    {
                        "name": 0,
                        "value": "住院信息"

                    },
                    {
                        "name": 1,
                        "value": "出院信息"
                    }
                ],
                    "columns": [
                        { "data": "name" },
                        { "data": "value"},
                        {"data" : null,
                            "render" : function(data, type,row) {

                                var html='<span  class="btn btn-primary div-1 div-s" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo" id="test"> <i class="fa fa-edit"></i>详情</span>'
                                return html;
                            }
                        }],

            });

        }
    );



</script>


<br>$(document).ready(function() {

              $('#example').dataTable( {

              //跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序

                "order": [[ 3, "desc" ]]

              } );

            } );

dataTables排序问题

1.禁止排序

    'ordering'  :false

    例：$('#id').DataTable({

               'ordering':false,

　　　 })

2.规定某一列排序

　　order的属性值有两个，asc为升序，desc为降序

    'order' : [7,'desc']    //与数组下标一样，第一列从0开始，表格初始化时，第八列默认降序

   例：

　　　　$('#example').dataTable( {

       "order": [[ 3, "desc" ]]

    } );

3.规定某列不排序

　　columnDefs:[{

　　　　'targets' : [0,1,2,3,4,7,8],    //除第六，第七两列外，都默认不排序

　　　　'orderable' : false

　　}]

4.添加具体跳转某一页
    fnDrawCallback: function(table) {

            $("#example_coun_paginate").append(" <span id='example_coun_paginate_spans'>跳至 <input style='' class='margin text-center' id='changePages' type='text'> 页</span>  <button type='button' id='dataTable-btns'>确认</button> ");

            var oTable = $("#example_coun").dataTable();

            $('#dataTable-btns').click(function(e) {

                if($("#changePages").val()==''){
                    alert('请选择跳转页')
                }else {
                    if($("#changePages").val() && $("#changePages").val() > 0) {
                        var redirectpages = $("#changePages").val() - 1;
                    } else {
                        var redirectpages = '';
                    }
                    oTable.fnPageChange(redirectpages);
                }

            });

        },