datatables使用总结篇

最新推荐文章于 2021-08-19 10:00:05 发布
weixin_34008933
最新推荐文章于 2021-08-19 10:00:05 发布
阅读量159
点赞数
文章标签： php json javascript ViewUI
<!doctype html>
<html>
<head>
    <meta charset="gbk"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" ,Chrome=1">
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <!--boostrap-->
    <link href="<?php echo base_url(); ?>static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="<?php echo base_url(); ?>static/bootstrap/js/jquery.min1.9.1.js"></script>
    <script src="<?php echo base_url(); ?>static/bootstrap/js/bootstrap.min.js"></script>

    <script src="<?php echo base_url(); ?>static/datatables/jquery.dataTables.min.js"></script>
    <link href="<?php echo base_url(); ?>static/datatables/dataTables.bootstrap.css" rel="stylesheet">
    <script src="<?php echo base_url(); ?>static/datatables/dataTables.bootstrap.js"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lte IE 9]>
    <script src="<?php echo base_url(); ?>static/iejs/respond.min.js"></script>
    <script src="<?php echo base_url(); ?>static/iejs/html5shiv.min.js"></script>
    <![endif]-->
    <link href="<?php echo base_url(); ?>static/mycss/mycss.css" rel="stylesheet">
    <link href="<?php echo base_url(); ?>static/mycss/admins.css" rel="stylesheet">
    <title>订单系统管理</title>

</head>
<body>
<div class="container">
    <!--<div class="row">
        <div>
            <ul class="nav nav-tabs">
                <li class="active"></li>
            </ul>
        </div>
    </div>-->
    <div class="row">
        <div class="panel panel-info">
            <div class="panel-heading"><h3 class="panel-title">订单管理</h3></div>
            <div class="panel-body">
                <form class="form-inline" role="form">
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-default active">
                            <input type="radio" name="works" id="works_all" value="works_all">全部
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="works" value="zs" id="works_zs">招商
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="works" value="sr" id="works_sr">善融
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="works" value="jh" id="works_jh">建行
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="works" value="gs" id="works_gs">工商
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="works" value="ms" id="works_ms">民生
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="works" value="tm" id="works_tm">天猫
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="works" value="yl" id="works_yl">邮乐
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="works" value="ykt" id="works_ykt">一卡通
                        </label>
                    </div>
                    <div class="form-group">
                        <label for="condition">查询条件:</label>
                        <select name="condition" id="condition" class="form-control">
                            <option value="">选择条件</option>
                            <option value="order_num">订单编号</option>
                            <option value="dinghuo_tel">订单手机号</option>
                            <option value="dinghuo">订收货人</option>
                            <option value="order_time">订货时间</option>
                            <option value="fahuo_time">发货时间</option>
                            <option value="wuliu_num">物流单号</option>

                        </select>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="condition_val" name="condition_val">
                    </div>

                    <div class="form-group">
                        <button type="button" id="btn_search" class="btn btn-primary" data-loading-text="查询中......">查 询
                        </button>
                    </div>


                </form>
            </div>
        </div>

    </div>
    <div class="row">
        <div id="alert_dialog"></div>
    </div>
    <!--class="table table-striped table-bordered table-hover table-full-width" -->
    <div class="row">
        <!--
        <button class="btn btn-default" id="visible">隐藏列</button>
        <button class="btn btn-default" id="get_checkbox">获取选中列</button>
        <button class="btn btn-default" id="get_checkbox">编 辑</button>-->
        <button class="btn btn-default" id="delete_order">删 除</button>
        <button class="btn btn-default" id="page_fresh">刷 新</button>
    </div>
    <br>

    <div class="row">
        <table id="example" class="table table-striped table-bordered" cellpadding="0" border="0" cellspacing="0"
               width="100%">
            <thead>
            <tr>
                <th><input type="checkbox" id="checkAll"></th>
                <th>订单编号</th>
                <th>收货人</th>
                <th>订货人</th>
                <th>订货人电话</th>
                <th>收货人电话</th>
                <th>商品名称</th>
                <th>平 台</th>
                <th>收货地址</th>
            </tr>
            </thead>

            <tfoot>
            <tr>
                <th></th>
                <th>订单编号</th>
                <th>收货人</th>
                <th>订货人</th>
                <th>订货人电话</th>
                <th>收货人电话</th>
                <th>商品名称</th>
                <th>平 台</th>
                <th>收货地址</th>
            </tr>
            </tfoot>
        </table>
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <!--<div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        模态框（Modal）标题
                    </h4>
                </div>-->
                <div class="modal-body">
                    是否删除选中的数据
                </div>
                <div class="modal-footer text-center">
                    <button type="button" class="btn btn-default" id="yes_delete" data-dismiss="modal">
                        是
                    </button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">
                        否
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="check_data" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <h4>先选择行数据</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">
                        关闭
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

</div>
<script type="text/javascript" src="<?php echo base_url(); ?>static/datatables/jquery.jeditable.mini.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        datatable = $('#example').DataTable({
            "processing": true,
            "bSort": false,
            "serverSide": true,
            "ajax": {
                "type": "post",
                "url": "<?php echo site_url();?>/admins/adminindex/get_datatable_data",
//                "url": "http://datatables.net/examples/server_side/scripts/jsonp.php",
                "dataType": "json"
            },
            "columnDefs": [
                {
                    targets: 0,
                    "render": function (data, type, rowdata, meta) {
                        return "<input type=\"checkbox\" name='order_checkbox' class='order_checkbox' value=" + data + '|' + rowdata.shouhuo_tel + ">";
                    }
                },
                {
                    targets: 7,
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        $(nTd).addClass('inputTd').attr('id', oData.id + '_' + oData.shouhuo_tel);
                    }
                }
            ],
            "columns": [
                {"data": "id", "orderable": false},
                {"data": "order_num", width: '60px', "orderable": false},
                {"data": "dinghuo", width: '60px'},
                {"data": "shouhuo", width: '60px'},
                {"data": "dinghuo_tel", width: '60px'},
                {"data": "shouhuo_tel", width: '60px'},
                {"data": "shangpin", width: '200px'},
                {"data": "work", width: '40px'},
                {"data": "songhuo_addr"}
            ],

            //创建行时使用
            "fnCreatedRow": function (nRow, aData, iDataIndex) {
                //add selected class
                //console.info(nRow);
                $(nRow).click(function () {
                    if ($(this).hasClass('row_selected')) {
                        $(this).removeClass('row_selected');
                    } else {
                        $('tr.row_selected').removeClass('row_selected');
                        //$(this).addClass('row_selected');
                    }
                });
            },
            //语言文件
            "language": {
                "processing": "玩命加载中...",
                "lengthMenu": "显示 _MENU_ 项结果",
                "zeroRecords": "没有匹配结果",
                "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "infoFiltered": "(由 _MAX_ 项结果过滤)",
                "infoPostFix": "",
                "search": "搜索:",
                "url": "",
                "paginate": {
                    "first": "首页",
                    "previous": "上页",
                    "next": "下页",
                    "slast": "末页"
                }
            },
            initComplete: function () {
                var api = this.api();
                var columns_indexes = api.columns().indexes().flatten();

                api.columns().indexes().flatten().each(function (i) {
                    var column = api.column(i);

//                    console.info(column.header());
//                    console.info(column);
                });

            },
            "fnDrawCallback": function (data, x) {
                $('#example tbody td.inputTd').editable("<?php echo site_url();?>/admins/adminindex/edit_order", {
                    indicator: '<img src="<?php echo base_url();?>/static/images/loading.gif">',
                    tooltip: '点击编辑',
                    //onblur : 'ignore',
                    callback: function (value, settings) {
                        if(value=='ok'){
                            datatable_fresh();
                        }else {
                            alert('操作失败');
                        }
                    },
                    submit: '<span style="cursor: pointer">保存</span>'
                });
            }
        });

        //xhr事件http://datatables.net/reference/event/xhr
        datatable.on('xhr.dt', function (e, settings, json) {
            // console.info(json);

        });


        //重新加载ajax.url
        /*datatable.ajax.url("http://datatables.net/examples/server_side/scripts/jsonp.php").load();
         datatable.ajax.dataType ="jsonp";*/

        //点击事件
        $('#example tbody').on('click', 'tr', function () {
            var name = $('td', this).eq(0).text();

            var index = $(this).context._DT_RowIndex; //行号
//            console.info($(this).context);
            //获取行数据
            //console.info(datatable.row(this).data());
            //alert('你点击了 ' + name + '这行' + index);
        });

//        获取按钮及数据
        //alert($(".btn-group label.active input").val());
        $("#btn_search").click(function () {

            var works = $(".btn-group label.active input").val();
            var condition = $("#condition").val();
            var condition_val = $("#condition_val").val();
            if (!condition && condition_val) {
                alert("选择查询条件");
                return false;
            }

            var jsons = {"works": works, "condition": condition, "condition_val": condition_val};
            //datatable.settings()[0].ajax.data={"name":"hubing"};
            datatable.settings().context[0].ajax.data = jsons;

            datatable.on(
                'xhr.dt', function (e, settings, json) {
                    if (json.data[0]) {
                        //alert('ok');
                    } else {
                        //alert('nook');
                    }
                    //重置搜索按钮
                    $("#btn_search").button('reset');
                }
            ).ajax.url("<?php echo site_url();?>/admins/adminindex/get_datatable_data").load();

            $(this).button('loading').delay(1000).queue(function () {
                $(this).button('reset');
            });
        });


    });


    //隐藏列和显示列
    $("#visible").on('click', function (e) {
        e.preventDefault();

        var column = datatable.column(8);
        column.visible(!column.visible());
    });


    //执行删除操作
    $("#delete_order").on('click', function (e) {
        e.preventDefault();

        var gc = get_checkbox();

        if (gc) {
            $('#myModal').modal('show');
            gc = JSON.stringify(gc);
            $('#yes_delete').unbind("click").on('click', function () {
                $.post('<?php echo site_url();?>/admins/adminindex/delete_order', {"delete_order": gc}, function (back) {
                    if(back) {
                        $('#alert_dialog').html("<div class='alert alert-info'><a href='#' class='close' data-dismiss='alert'>&times;</a><strong>"+back+"条数据删除成功！</strong></div>");
                    }else {
                        $('#alert_dialog').html("<div class='alert alert-warning'><a href='#' class='close' data-dismiss='alert'>&times;</a><strong>！</strong>删除操作失败。</div>");
                    }
                    datatable_fresh();
                });
            })
        }

    });


    $("#get_checkbox").on('click', function (e) {
        e.preventDefault();
        var gc = get_checkbox();
        alert(gc);
    });


    //获取选中的行数据
    function get_checkbox() {
        var checkbox = new Array();
        $("input[name='order_checkbox']").each(function () {
            if (this.checked) {
                checkbox.push($(this).val());
            }
        });

        if (!checkbox[0]) {
            //alert('选择行数据');
            $('#check_data').modal('show');
            return false;
        } else {
            return checkbox;
        }
        //console.info(checkbox);
    }


    //全选按钮
    $("#checkAll").click(function () {
            if (this.checked) {
                $("input[name='order_checkbox']").each(function () {
                    this.checked = true;
                });
            } else {
                $("input[name='order_checkbox']").each(function () {
                    this.checked = false;
                });
            }
        }
    );

    //刷新按钮
    $("#page_fresh").click(function () {

        datatable_fresh();

    });

    //刷新当前页面
    function datatable_fresh() {
        datatable.ajax.reload(null, false);
    }



</script>
</body>
<style type="text/css">
    .row_selected {
        background: red;
    }
</style>

</html>