在jquery表排序

时间:2015-06-18 13:01:45

标签: php jquery arrays sorting

我在每行的第一个单元格中有一个带有复选框的表,用户可以在其中选择要删除的行。选中的复选框通过post方法作为数组传递到另一个页面以处理行删除。这是一个示例表:

<a href="javascript:void(0)">
    <div class="button category_button">
        Remove Selected
    </div>
</a>
<table id="table_dump">
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col" class="sort">ID <a href="javascript:void(0)"><i class="fa fa-sort"></i></a></th>
            <th scope="col" class="sort">Public <a href="javascript:void(0)"><i class="fa fa-sort"></i></a></th>
            <th scope="col" class="sort">Last Modified <a href="javascript:void(0)"><i class="fa fa-sort"></i></a></th>
            <th scope="col" class="sort">Modified By <a href="javascript:void(0)"><i class="fa fa-sort"></i></a></th>
            <th scope="col" class="sort">Name <a href="javascript:void(0)"><i class="fa fa-sort"></i></a></th>
            <th scope="col" class="sort">Total Videos <a href="javascript:void(0)"><i class="fa fa-sort"></i></a></th>
            <th scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
        <form class="category_bulkremove" method="post" action="category_bulkremove.php">
            <tr class="light">
                <td><input type="checkbox" class="category_check" name="bulk_remove[]" value="1" /></td>
                <td>1</td>
                <td>Yes</td>
                <td><!--1433745120-->June 08, 2015 2:32 PM</td>
                <td>Joseph Mok</td>
                <td>beauty</td>
                <td>87</td>
                <td><a href="category_edit.php?category_id=1">View</a></td>
            </tr>

            <tr class="dark">
                <td><input type="checkbox" class="category_check" name="bulk_remove[]" value="2" /></td>
                <td>2</td>
                <td>Yes</td>
                <td><!--1433737543-->June 08, 2015 12:25 PM</td>
                <td>Joseph Mok</td>
                <td>fashion</td>
                <td>23</td>
                <td><a href="category_edit.php?category_id=2">View</a></td>
            </tr>

            <tr class="light">
                <td><input type="checkbox" class="category_check" name="bulk_remove[]" value="3" /></td>
                <td>3</td>
                <td>Yes</td>
                <td><!--1433737544-->June 08, 2015 12:25 PM</td>
                <td>Joseph Mok</td>
                <td>fitness</td>
                <td>11</td>
                <td><a href="category_edit.php?category_id=3">View</a></td>
            </tr>
        </form>
        <script>
            $(document).ready(function(){
                // Update these 3 variables for each table
                var button = '.category_button';
                var checkbox = '.category_check';
                var form = '.category_bulkremove';

                var checked = checkbox + ':checked';

                $(button).hide();

                $(checkbox).click(function() {
                    if ( $(checked).length > 0) {
                        $(button).show();
                    } else {
                        $(button).hide();
                    }
                }); 

                $(button).click(function(){
                    var removeConfirm = confirm("Are you sure you want to remove the selected items? This cannot be undone. If you want to hide the items on the website, simply set \"Public\" to \"No\"");
                    if (removeConfirm){
                        $(form).submit();
                    }
                });
            });
        </script>
  </tbody>
</table>

这是处理删除行的php:

if($_POST['bulk_remove']!='') {
    $bulk_remove = $_POST['bulk_remove'];

    // For loop for each checked item
    for($i=0; $i < count($bulk_remove); $i++){
        $remove_id = strip_tags(mysql_real_escape_string($bulk_remove[$i]));

        // Check if id exists
        $sql = mysql_query("
            SELECT 
                * 
            FROM 
                category_index
            WHERE 
                id='$remove_id' AND
                remove='0'
        ");
        $exist = mysql_num_rows($sql);
        if($exist==1) {
            // Update table to set remove to 1 for id
            $update=mysql_query("
                UPDATE 
                    category_index
                SET 
                    active='0',
                    remove='1'
                WHERE 
                    id='$remove_id'
            ") or die (mysql_error());
        }   
        else {
            $error_message = 'An item you tried to remove does not exist.';
            $error = TRUE;
        }
    }
}
else {
    $error = TRUE;
    $error_message = 'Seems like some data went missing. Please try again.';
}

删除行可以正常使用此设置。但是,当用户点击表头时,我还使用以下jQuery重新排序整个表:

$('th.sort').click(function(){
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
    this.asc = !this.asc
    if (!this.asc){rows = rows.reverse()}
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index)
        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
    }
}
function getCellValue(row, index){ return $(row).children('td').eq(index).html() }

重新订购也很好。但是当我在重新订购表后尝试删除行时问题就出现了。 post变量数组不会传递给下一页。但我使用get方法测试,处理页面的URL不包含任何变量。但是,如果我使用基本字符串作为值向表单添加隐藏字段,则隐藏字段值将到达处理页面但数组仍然缺失。谁能帮我这个?提前谢谢!

编辑:这是我的问题的简化演示: http://www.josephmok.me/_test/sort_table.php

如果您选中一些复选框并单击“提交”,它将返回该数组。但是,如果单击表格标题进行排序,然后选中复选框并提交,则不会发送已发布的数组。

0 个答案:

没有答案