正文

datatables使用总结篇

IP云
IP云V管理员/3 阅读
11/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示
<!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>

相关阅读

目录[+]