zoukankan      html  css  js  c++  java
  • datatable 自定义搜索

    首先一个搜索的input框

          <div class="text-c">
                    用户名称:<input type="text" class="input-text" style="250px" placeholder="输入用户名称" id="name"
                           name="name">
                    <button type="submit" class="btn btn-success" onclick="search()"><i class="icon-search"></i> 搜用户
                    </button>
                </div>

    给那个按钮一个点击事件onclick="search()"

    js如下

     var table;
        function search() {
            table.draw();
        }
        $(function () {
            if (table == null) {
                table = $('.table-sort').DataTable({
                    "aaSorting": [[2, "desc"]],//默认第几个排序
                    "bStateSave": true,//状态保存
                    "serverSide": true,  //启用服务器端分页
                    "searching": false,
                    "sAjaxSource": "/dataGrid.json",
                    "sPaginationType": "full_numbers",      //翻页界面类型
                    "oLanguage": {                          //汉化
                        "sLengthMenu": "每页显示 _MENU_ 条记录",
                        "sZeroRecords": "没有检索到数据",
                        "sInfo": "当前数据为从第 _START_ 到第 _END_ 条数据;总共有 _TOTAL_ 条记录",
                        "sInfoEmtpy": "没有数据",
                        "sInfoFiltered":'',//设置为空 相当于删除 (从 _MAX_ 条中过滤)
                        "sProcessing": "正在加载数据...",
                        "oPaginate": {
                            "sFirst": "首页",
                            "sLast": "尾页"
                        }
                    },
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        aoData.push({"name":"name","value":$("#name").val()})
                        $.ajax({
                            "dataType": 'json',
                            "type": "POST",
                            "url": sSource,
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    //列表表头字段
                    "columns": [
                        {
                            "mData": "id",
                            "mRender": function (data, type, full) {
                                return '<input type="checkbox" value="' + data + '" name="checkbox">'
                            }
                        },
                      ...//此处省略
                    ]
                });
            }
            table.draw();
        });

    加上红色的就可以了。好简单。。我都感到意外了。

  • 相关阅读:
    Selenium之编辑框操作
    Selenium之勾选框操作
    Selenium之单选框操作
    [复习资料]组合计数学习笔记
    ARC104游记
    [被踩计划] 题解 [省选联考 2020 A 卷] 作业题
    题解 [SEERC2019]Game on a Tree
    [被踩计划] 题解 [NOI2020]美食家
    [被踩计划] 题解 [省选联考 2020 A 卷] 组合数问题
    [被踩计划] 题解 括号树
  • 原文地址:https://www.cnblogs.com/xuerong/p/8709946.html
Copyright © 2011-2022 走看看