Question

我已经基于http://www.jtable.org模板创建了一个表格，我的表格，并且大部分功能已启动并运行，但是当我想要包含搜索栏来过滤时遇到问题我输入的表格结果。我相信的问题在于，我使用php创建的大多数表都在代码中创建了实际的html表，例如td＆s和tr，并且搜索功能会关闭匹配这些术语。

目前我的表格是在前端生成的，后端没有实际的HTML内容，所以我无法搜索。是否有任何方法可以使用此代码搜索此表，可能使用服务器端处理，或者其他我不知道的其他方法？

这是我使用的代码：

<html>
<title> title </title>
<head>

<link href="themes/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="scripts/jtable/themes/metro/darkgray/jtable.css" rel="stylesheet" type="text/css" />

<script src="scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="scripts/jtable/jquery.jtable.js" type="text/javascript"></script>

</head>

<body>
   <div class="filtering">

<body>


<input type="text"  style="background-color: #e6ffff;" placeholder="Search  Any Column" size="70" id="search";/> 
</body>



<div id="PeopleTableContainer" style="width: relative;"  ></div>
<img src="Sharks-2-Trans-30-150623-2.png"  width="150" height="43"  style="float:bottom-right; opacity: 10;">



<script type="text/javascript">

    $(document).ready(function () {

        //Prepare jTable
        $('#PeopleTableContainer').jtable({
            title: 'ICS Central',
            paging: true, //Enable paging
            pageSize: 10, //Set page size (default: 10)
            sorting: true, //Enable sorting
            defaultSorting: 'ISO_Name ASC', //Set default sorting
            selecting: true, //Enable selecting
            multiselect: true, //Allow multiple selecting
            selectingCheckboxes: true, //Show checkboxes on first column
            //selectOnRowClick: false, //Enable this to only select using checkboxes

            actions: {
                listAction: 'PersonActions2.php?action=list',
                createAction: 'PersonActions2.php?action=create', 

                updateAction: 'PersonActions2.php?action=update',
                deleteAction: 'PersonActions2.php?action=delete'
            },

            fields: {
                PersonId: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                ISO_Name: {
                    title: 'ISO Name',
                    width: '5%'
                },
                ICS_Defect: {
                    title: 'Defect #',

                    width: '5%'
                },
                Abstract: {
                    title: 'Abstract',

                    width: '30%'
                },
                problem_description: {
                    title: 'Problem Description',

                    width: '30%'
                },
                fix_description: {
                    title: 'Fix Description',

                    width: '30%'

                },

                 levels_approved: {
                    title: 'Levels Approved',

                    width: '30%'

                },
                reboot_required: {
                    title: 'Reboot Required?',

                    width: '30%'

                },
                 reapplied_after_ccl: {
                    title: 'Reapplied After CCL?',

                     width: '30%'

                },
                 reapplied_after_hmc_rebuild: {
                    title: 'Reapplied After HMC Rebuild?',

                    width: '30%'

                },
                 bundle_fix_cmvc: {
                    title: 'Bundle Fix CMVC',

                    width: '30%'

                }


            },




        //Register to selectionChanged event to hanlde events
        selectionChanged: function () {
            //Get all selected rows
            var $selectedRows = $('#PeopleTableContainer').jtable('selectedRows');

            $('#SelectedRowList').empty();
            if ($selectedRows.length > 0) {
                //Show selected rows
                $selectedRows.each(function () {
                    var record = $(this).data('record');
                    $('#SelectedRowList').append(
                        '<b>ISO_Name</b>: ' + record.ISO_Name +
                        '<br /><b>Abstract</b>:' + record.Abstract + '<br /><br />'
                        );
                });
            } else {
                //No rows selected
                $('#SelectedRowList').append('No row selected! Select rows to see here...');
            }
        },
       // rowInserted: function (event, data) {
         //   if (data.record.ISO_Name.indexOf('Add_Info_HB_v1.0.iso') >= 0) {
           //     $('#PeopleTableContainer').jtable('selectRows', data.row);
            //}
        //}
    });

    //Load student list from server
    $('#PeopleTableContainer').jtable('load');

    //Delete selected students
    $('#DeleteAllButton').button().click(function () {
        var $selectedRows = $('#PeopleTableContainer').jtable('selectedRows');
        $('#PeopleTableContainer').jtable('deleteRows', $selectedRows);
    });
});
</script>

  </body>
</html>

Answer 1

我使用搜索文本字段并在keyUp上过滤结果，但这不是客户端过滤。它对列表操作进行ajax调用，并使用变量searchname进行过滤。我们使用Hibernate并有一行代码从DB过滤，如：＆＃34; obj.name喜欢＆＃39;％searchname％＆＃39; ＆＃34;

<body>
   <div class="filtering">
      Name: <input type="text" id="search"/>
   </div>
<body>

...
...

<script type="text/javascript">

    $(document).ready(function () {
       ...
       $('#search').keyup(function(){
          $('#PeopleTableContainer').jtable('load', {searchname: $(this).val()});
       });
    }

如何搜索不生成任何td等的HTML表格？

1 个答案: