没有结果找到数据表时如何启用按钮

时间:2015-01-29 17:45:15

标签: jquery-datatables

<script>
    $(document).ready(function() {
        $('#dataTables-example').DataTable({
                responsive: true
        });
    });
    </script>
<script>
$(document).ready(function () {

   $('#dataTables-example').dataTable( {
    "fnDrawCallback": function( oSettings ) {
        if ($(".dataTables_empty")[0]) {
            $('#newclient').prop("disabled", false);
        } else {
            $('#newclient').prop("disabled", true);
        }
    }
  } );
});
</script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
    <script src="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.js"></script>
	<link href="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
    <link href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css" rel="stylesheet">    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

</head>

<body>


                        	<div class="add-client"><button type="button" class="btn btn-primary btn-sm" id="newclient"  disabled="true">Add Client</button></div>
                    
                                <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>File Number</th>
                                            <th>Department</th>
                                            <th>Date</th>
                                            <th>User Name</th>
                                            <th>Password</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="odd gradeX">
                                            <td><a href="view-client.html">Mbello Elizabeth</a></td>
                                            <td>954687</td>
                                            <td>w547</td>
                                            <td>October 15 2013</td>
                                            <td>Mbello</td>
                                            <td>cfhqsuvx</td>
                                        </tr>

                                    </tbody>
                                </table>

我正在使用DataTables,我需要在搜索后找不到任何结果时启用按钮,任何人都可以帮助我。

由于

它可以在这里工作,但它不能在我的页面中工作,我不知道是什么问题

1 个答案:

答案 0 :(得分:1)

您可以使用DataTables绘制回调来查明当前表中是否没有结果。 fnDrawCallback

这是一个简单的fiddle,用于检查搜索后如何启用按钮,但没有结果。

使用Javascript:

$(document).ready(function () {
  $('#example').dataTable( {
    "fnDrawCallback": function( oSettings ) {
        if ($(".dataTables_empty")[0]) {
            $('#test').prop("disabled", false);
        } else {
            $('#test').prop("disabled", true);
        }
    }
  } );
});