防止分页jquery数据表中的多个单选按钮选择

kgqe7b3p 于 2023-08-04 发布在 jQuery

关注(0)|答案(3)|浏览(117)

我正在使用Jquery数据表和HTML中的分页。单选按钮在单页中工作正常，但无法防止单选按钮在多页时的多次选择，即如果我在第1页中选择一个单选按钮，在第2页中选择另一个单选按钮，则两者都处于选定模式。单选按钮以单一选择而闻名，但在这里我得到了不同的行为

jquery

来源：https://stackoverflow.com/questions/21778443/prevent-multiple-radio-button-selections-in-paginated-jquery-datatables

3条答案

按热度按时间

1bqhqjot1#

我和你有同样的问题。我找到了一个解决这个问题的办法。请在下面的完整示例中找到代码详细信息。

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<style>
table.dataTable tbody>tr.selected,
table.dataTable tbody>tr>.selected {
  background-color: #A2D3F6;
}
</style>
</head>
<body>    
<table id="example">
    <thead>
        <tr>
            <th>Location </th>
            <th>Base Location </th>
        </tr>
    </thead>

    <tbody>
        <tr><td>Pune</td><td><input type="radio" name="baseLocation" value="Pune"/></td></tr>
        <tr><td>Mumbai</td><td><input type="radio" name="baseLocation" value="Mumbai"/></td></tr>
        <tr><td>Dubai</td><td><input type="radio" name="baseLocation" value="Dubai"/></td></tr>        
        <tr><td>Nashik</td><td><input type="radio" name="baseLocation" value="Nashik"/></td></tr>
        <tr><td>Delhi</td><td><input type="radio" name="baseLocation" value="Delhi"/></td></tr>
        <tr><td>Sangli</td><td><input type="radio" name="baseLocation" value="Sangli"/></td></tr>        
        <tr><td>Chennai</td><td><input type="radio" name="baseLocation" value="Chennai"/></td></tr>
        <tr><td>Panji</td><td><input type="radio" name="baseLocation" value="Panji"/></td></tr>
        <tr><td>Thane</td><td><input type="radio" name="baseLocation"value="Thane" /></td></tr>        
        <tr><td>Patna</td><td><input type="radio" name="baseLocation"value="Patna" /></td></tr>
        <tr><td>Bhopal</td><td><input type="radio" name="baseLocation " value="Bhopal"/></td></tr>
        <tr><td>ABC</td><td><input type="radio" name="baseLocation" value="ABC"/></td></tr>
        <tr><td>XYX</td><td><input type="radio" name="baseLocation" value="XYX"/></td></tr>
        <tr><td>PQR</td><td><input type="radio" name="baseLocation"/ value="PQR"></td></tr>
        <tr><td>Riaydh</td><td><input type="radio" name="baseLocation" value="Riaydh"/></td></tr>        
        <tr><td>Jeddah</td><td><input type="radio" name="baseLocation" value="Jeddah"/></td></tr>
    </tbody>
</table>
</body>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var lastSelectedRadio = '';
var table='';
$(document).ready(function() {
   table= $('#example').DataTable( {
        responsive: true,
        pageLength: 5,
        lengthChange: true,
        bSort: false,
        "sPaginationType": "full_numbers",
        lengthMenu: [5, 10, 15],
        "fnDrawCallback": function( oSettings ) {
            lastSelectedRadio=currentSelectedRadio();
         },
    } );
} );

$("#example input[type='radio']").on("click",function(){
         table.$("input[type='radio'][value='" + lastSelectedRadio +"']").prop('checked', false);
         lastSelectedRadio = ($(this).val() ? $(this).val() :lastSelectedRadio)
         table.$("input[type='radio'][value='" + lastSelectedRadio + "']").prop('checked', true);
    });

function currentSelectedRadio()
{
    var currentSelectedValue=lastSelectedRadio;
    $("#example input[type=radio]:checked").each(function() {
        currentSelectedValue=($(this).val() ? $(this).val() :currentSelectedValue);
    }); 
    return currentSelectedValue;
}

</script>
</html>

字符串

**说明：**在上面的代码中可以看到，我编写了一个自定义函数currentSelectedRadio（），并从fnDrawCallback调用它，因为每次更改页面时fnDrawCallback函数都会调用。同时，我们正在将先前选择的按钮值备份到全局var 'lastSelectedRadio'中。单选按钮的单击事件。我正在从全局变量lastSelectedRadio中取消选中以前选择的按钮的值，并将选中的属性添加到当前单选按钮。

但是请记住，datatable的另一个页面上的元素在DOM中将不可用。Datatable只将当前页面元素添加到DOM中。那么，我们如何才能获得所有在datatable中可用但在DOM中不可用的元素呢？是的，我们可以得到所有的元素，为此我们必须使用table.$（“”）语法迭代datatable，然后只能在选择当前按钮之前选中另一个页面上的单选按钮

赞(0）回复(0）举报 2023-08-04

ssm49v7z2#

我也有同样的问题，我很感谢@Suresh提供了解决方案。我遵循了类似的方法，但在实现时略有不同。我希望这些信息对其他人有帮助。
表格示例：

<table id="tableLocations" class="table table-hover" style="width:100%">
    <thead>
        <tr class="table-primary">
            <th>Location</th>
            <th>Base Location</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>Pune</td><td><input type="radio" name="baseLocation" value="Pune"/></td></tr>
        <tr><td>Mumbai</td><td><input type="radio" name="baseLocation" value="Mumbai"/></td></tr>
        <tr><td>Dubai</td><td><input type="radio" name="baseLocation" value="Dubai"/></td></tr>        
        <tr><td>Nashik</td><td><input type="radio" name="baseLocation" value="Nashik"/></td></tr>
        <tr><td>Delhi</td><td><input type="radio" name="baseLocation" value="Delhi"/></td></tr>
    </tbody>
</table>

字符串
JavaScript：

<script type="text/javascript">
    let selectedLocation; // To keep the value
    $(document).ready(function(){

        // Initializing data table
        $("#tableLocations").DataTable({
            responsive: true,
            pageLength: 2,  // Just change as you wish
            fnDrawCallback: function(oSettings) {
                // Uncheck all the radios
                $(`#tableLocations input[name="baseLocation"]`).prop('checked', false);

                // if we have already selected item, we can check it again
                if (selectedLocation) $(`#tableLocations input[value="${selectedLocation}"]`).prop('checked', true);
            },
        });

        // A jquery way of event late binding
        $(document).on('click', '#tableLocations input[name="baseLocation"]', function () {

            // Keep the last selected value
            selectedLocation = $(this).val();
        });
    });
</script>

型

赞(0）回复(0）举报 2023-08-04

rxztt3cl3#

我遇到了同样的问题，我在这里找到了一个帖子：http://datatables.net/forums/discussion/20484/how-to-avoid-multiple-radio-buttons-selection-when-paginating-a-table
每次切换页面时都会调用drawCallback函数。因此，可以将当前在页面上选中的button的值与在其他页面上选中的button的值进行比较。（你需要保存上次选中按钮的值）如果它们不匹配，那么只需要清除当前页面上按钮的check属性。
希望对你有帮助。

赞(0）回复(0）举报 2023-08-04

我来回答

防止分页jquery数据表中的多个单选按钮选择

3条答案

相关问题

热门标签

最新问答