Question

我已经看到多篇关于这种类型问题的文章，但是经过几天尝试了很多很多事情之后，我可能无法使用它，这可能是由于我对javascript / UI缺乏经验所致。

无论如何，我有一个后台功能，可以定期更新一些数据库内容，但用户也可以添加和删除行。所以我想向表而不是页面添加刷新按钮，但是刷新不起作用。我尝试在document.ready内部添加refreshData函数，但是浏览器抱怨我将其放置在何处，或者uitable变量未定义。我不会发布我尝试过的所有其他内容，但会发布我现在可以正确显示该表的内容，但刷新失败：

Uncaught TypeError: Cannot read property 'reload' of undefined
    at refreshData (fetch:1043)
    at HTMLButtonElement.onclick (fetch:1)
Code:

$(document).ready(function () {
        $.ajax({
            type : "POST",
            url : href + "/refreshInstanceList",
            data : {"action":"get"},
            async: false,
            cache: false,
            success : function(data) {
                instdata = data.success;
                var uitable = $('#userInventory').DataTable({
                    data : instdata,
                    columns : [ 
                        {
                            "data" : "hostname",
                            title : 'Hostname',
                            "render" : function(data, type, row, meta) {    
                                return data;
                            }
                        }
                    ],
                    "initComplete": function() {
                        $("#userInventory_filter").append('&nbsp;&nbsp;<button type="button" onclick="refreshData()"><i class="fa fa-refresh"></i></button>');
                    },
                });
            },

            error : function(xhr, status, error) {
                console.log(error);
                infoMessage = "\tAn error occurred whilst processing your request \n\tPlease contact Administrator to resolve this issue.";
                showInformationMessage(infoMessage);                    
            },
            complete : function() {}


        });
    });

    function refreshData() {
        var table = $('#userInventory').dataTable(); 
        table.ajax.reload();
    }

感谢您提供的任何帮助。

Answer 1

请观看此演示codepen

$(document).ready(function () {

  var uitable = $('#userInventory').DataTable({
    //data : instdata,
    ajax: {
      type : "POST",
      url : href + "/refreshInstanceList",
      data : {"action":"get"},
      async: false,
      cache: false,
    },
    columns : [
      {
        "data" : "hostname",
        title : 'Hostname',
        "render" : function(data, type, row, meta) {
          return data;
        }
      }
    ],
    "initComplete": function() {
      $("#userInventory_filter").append('&nbsp;&nbsp;<button type="button" onclick="refreshData()"><i class="fa fa-refresh"></i></button>');
    },
  });

  $('#some_button').click(function refreshData() {
    var table = $('#userInventory').dataTable();
    table.ajax.reload();

    //Or
    //uitable.ajax.reload();
  });
});

仅当您在创建数据表时向数据表提供“ ajax”属性时才有意义，以便重新加载。

为此datatable ajax documentation


const ExpiringCertificationsScreen = () => {
   const { state, fetchCertifications } = useContext(CertificationContext);
   const [expiration, setExpiration] = useState([]);

   const diffDays = date => {
     let today = new Date(Date.now()).toLocaleDateString();
     let expire = new Date(date.toLocaleDateString());
     let difference = new Date(expire).getTime() - new Date(today).getTime();
     return difference / (1000 * 3600 * 24);
  };

  useEffect(() => {
     const filterExpirationDate = state.filter(item => {
         return diffDays(new Date(item.expirationDate)) <= 30;
     });        
      console.log(filterExpirationDate);
      setExpiration(filterExpirationDate);
  }, [state]);

  return expiration.length === 0 ? (
      <Body>
        <Text style={styles.title}>EXPIRING SOON</Text>
        <Text style={{ margin: 15 }}>
          There aren't any certifications expiring soon
        </Text>
      </Body>
  ) :(
    <Body>
      <Text style={styles.title}>EXPIRING SOON</Text>
      <ScrollView style={{ marginTop: 15 }}>
        <FlatList
          data={expiration}
          keyExtractor={item => item._id}
          renderItem={({ item }) => {
            return (
              <Certifications
                title={item.title}
                month={item.expirationDate}
                description={item.description}
                id={item._id}
              />
            );
          }}
        />
      </ScrollView>
    </Body>
  );
};

希望这对您有帮助

单击按钮刷新数据表

1 个答案: